feat: 接口联通

mock/screenData.ts

@@ -38,7 +38,7 @@ export default [
     method: "post",
     response: req => {
       const { currServerList } = req.body;
-      console.log(currServerList, "currServerList");
+      // console.log(currServerList, "currServerList");
       const finalServerList = currServerList.map(item => {
         if (item.isEnabled) {
           item.progressData = item.progressData.map(itemChild => {

src/api/workbench.ts

@@ -0,0 +1,58 @@
+import { http } from "@/utils/http";
+import { baseUrlApi } from "./utils";
+
+type Result = {
+  success: boolean;
+  data?: Array<any> | any;
+};
+
+type ResultList = {
+  success: boolean;
+  data?: {
+    count: number;
+    /** 列表数据 */
+    results: Array<any>;
+  };
+};
+
+/** 获取异常分类 */
+export const getDataOverviewList = (params?: object) => {
+  return http.request<Result>("get", baseUrlApi("data_overview/"), {
+    params
+  });
+};
+
+/** 获取设备分类 */
+export const getDeviceList = (params?: object) => {
+  return http.request<Result>("get", baseUrlApi("device_and_warnings/"), {
+    params
+  });
+};
+
+/** 获取违规总量 */
+export const getWarningList = (params?: object) => {
+  return http.request<Result>("get", baseUrlApi("warnings_and_message/"), {
+    params
+  });
+};
+
+/** 获取消息通知 */
+export const getMessagesList = (params?: object) => {
+  return http.request<ResultList>("get", baseUrlApi("messages/"), {
+    params
+  });
+};
+
+/** 获取算力配置 */
+export const getComputeConfigList = (params?: object) => {
+  return http.request<ResultList>("get", baseUrlApi("compute_config/"), {
+    params
+  });
+};
+
+/** 获取缺陷 */
+export const getClassifyWarningsList = (params?: object) => {
+  return http.request<ResultList>("get", baseUrlApi("classify_warnings/"), {
+    params
+  });
+};

src/pages/dataScreen/components/deviceStatus.vue

@@ -16,13 +16,15 @@ defineOptions({
   name: "DeviceStatus"
 });
 
-const deviceStatusData = ref<Record<string, any>>({
-  onlineCount: 618,
-  errorCount: 120,
-  processCount: 118,
-  outlineCount: 200
+const props = defineProps({
+  deviceStatus: {
+    type: Object,
+    default: () => {}
+  }
 });
 
+const deviceStatusData = ref({ ...props.deviceStatus });
+
 const deviceStatusOptions = ref<Record<string, any>[]>([
   {
     label: "在线",

src/pages/dataScreen/views/alarm/alarmInfoIndex.vue

@@ -9,9 +9,11 @@
 <script setup lang="ts">
 import { DsBox2 } from "@/components/DsBox";
 import { getAlarmList } from "@/api/list";
+import { getWarnList } from "@/api/alarm";
 import { onMounted, ref, reactive, h } from "vue";
 import { BaseTable } from "@/components/CustomTable";
 import { getConfig } from "@/config";
+import dayjs from "dayjs";
 // import ModelCofrimBox from "../../components/modelCofrimBox.vue";
 
 defineOptions({
@@ -84,17 +86,19 @@ const columns = [
   // },
   {
     label: "告警名称",
-    property: "name"
+    property: "warning_name"
   },
   {
     label: "告警代码",
-    property: "code"
+    property: "warning_code"
   },
   {
     label: "告警等级",
-    property: "level",
+    property: "warning_level",
     formatter: val => {
-      const currentLevelObj = alarmLevelStatusEnum[Number(val?.level) - 1];
+      console.log(val);
+      const currentLevelObj =
+        alarmLevelStatusEnum[Number(val?.warning_level) - 1];
       return h(
         "div",
         {
@@ -123,8 +127,8 @@ const columns = [
     }
   },
   {
-    label: "设备组",
-    property: "deviceGroup",
+    label: "节点",
+    property: "node_name",
     formatter: val => {
       return h(
         "div",
@@ -144,7 +148,7 @@ const columns = [
               fontSize: "14px",
               class: "text-white"
             },
-            val.deviceGroup
+            val.node_name
           )
         ]
       );
@@ -152,13 +156,15 @@ const columns = [
   },
   {
     label: "告警日期",
-    property: "createTime"
-  },
-  // TODO 需要封装操作按钮
-  {
-    type: "action",
-    label: "操作"
+    property: "trigger_time",
+    formatter: ({ trigger_time }) =>
+      dayjs(trigger_time).format("YYYY-MM-DD HH:mm:ss")
   }
+  // TODO 需要封装操作按钮
+  // {
+  //   type: "action",
+  //   label: "操作"
+  // }
 ];
 
 const svg = `
@@ -179,20 +185,24 @@ const listData = ref([]);
 // const searchValue = ref("");
 
 const formData = reactive({
-  name: "",
-  level: ""
+  warning_name: "",
+  warning_level: ""
 });
 
 const dataLoading = ref(true);
 
 const getList = async () => {
   const { currentPage, pageSize } = pagination.value;
-  const { data } = await getAlarmList({ page: currentPage, pageSize });
-  listData.value = data.list;
-  console.log(data.list);
+  const { data } = await getWarnList({
+    ...formData,
+    page: currentPage,
+    pageSize
+  });
+  listData.value = data.results;
+  console.log(data.results);
   pagination.value = {
     ...pagination.value,
-    total: data.total
+    total: data.count
   };
   dataLoading.value = false;
   // try {
@@ -245,18 +255,25 @@ onMounted(() => {
             >
               <el-form-item label="告警名称">
                 <el-select
-                  v-model="formData.name"
+                  v-model="formData.warning_name"
                   placeholder="告警名称"
+                  @change="getList"
                   clearable
                 >
                   <!-- <el-option label="名称1" value="1" />
                   <el-option label="名称2" value="2" /> -->
+                  <el-option label="表面裂纹" value="表面裂纹" />
+                  <el-option label="外观缺损" value="外观缺损" />
+                  <el-option label="表面划痕" value="表面划痕" />
+                  <el-option label="白斑" value="白斑" />
+                  <el-option label="毛刺" value="毛刺" />
                 </el-select>
               </el-form-item>
               <el-form-item label="告警等级">
                 <el-select
-                  v-model="formData.level"
+                  v-model="formData.warning_level"
                   placeholder="告警等级"
+                  @change="getList"
                   clearable
                 >
                   <el-option

src/pages/dataScreen/views/computePowerAllocation/computePowerAllocationIndex.vue

@@ -14,7 +14,8 @@ import { ComputePowerPoolItem } from "./typing";
 import { AnimationPic } from "@/components/AnimationCard";
 import computePowerAllocationIcon from "@/assets/animate/device/computePowerAllocation.json";
 import { DsBox2 } from "@/components/DsBox";
-import { getPowerPoolsList, getPowerGroupList } from "@/api/list";
+import { getPowerGroupList } from "@/api/list";
+import { getComputeConfig } from "@/api/computePower";
 
 defineOptions({
   name: "ComputePowerAllocation"
@@ -25,7 +26,7 @@ const groupList = ref<Record<string, any>[]>([]); //获取dom;
 const poolsData = ref<ComputePowerPoolItem[]>([]);
 
 async function fetchPowerData() {
-  const res = await getPowerPoolsList();
+  const res = await getComputeConfig();
   console.log("fetchPowerData_res", res);
   poolsData.value = res.data;
 }

src/pages/dataScreen/views/home/components/ComputingPowerPie.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch, type Ref } from "vue";
+import { ref, computed, watch, type Ref, nextTick } from "vue";
 import { useAppStoreHook } from "@/store/modules/app";
 import {
   delay,
@@ -23,6 +23,16 @@ const { setOptions, resize } = useECharts(
   }
 );
 
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => []
+  }
+});
+watch(
+  () => props,
+  async () => {
+    await nextTick();
     setOptions(
       {
         title: {
@@ -79,13 +89,14 @@ setOptions(
               length2: 15
             },
             name: "",
-        data: [
-          { value: 15, name: "螺纹缺陷检测" },
-          { value: 40, name: "PIN间距测量" },
-          { value: 20, name: "压板缺陷检测" },
-          { value: 15, name: "划伤缺陷检测" },
-          { value: 10, name: "工件尺寸测量" }
-        ]
+            data: props.data
+            // data: [
+            //   { value: 15, name: "螺纹缺陷检测" },
+            //   { value: 40, name: "PIN间距测量" },
+            //   { value: 20, name: "压板缺陷检测" },
+            //   { value: 15, name: "划伤缺陷检测" },
+            //   { value: 10, name: "工件尺寸测量" }
+            // ]
             // label: {
             //   formatter: function (params) {
             //     return params.value + "%";
@@ -145,6 +156,12 @@ setOptions(
         }
       }
     );
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+);
 
 watch(
   () => useAppStoreHook().getSidebarStatus,

src/pages/dataScreen/views/home/components/DefectBar3D.vue

@@ -92,29 +92,29 @@ const CubeTop = echarts.graphic.extendShape({
 echarts.graphic.registerShape("CubeLeft", CubeLeft);
 echarts.graphic.registerShape("CubeRight", CubeRight);
 echarts.graphic.registerShape("CubeTop", CubeTop);
-watch(
-  () => props.defect3DData,
-  newDefectData => {
-    defect3DData.value = [...newDefectData];
-    updateChart();
-  },
-  { immediate: true, deep: true }
-);
-function updateChart() {
-  // 检查图表实例是否存在
-  if (!getInstance()) {
-    console.error("图表实例不存在");
-    return;
-  }
+// watch(
+//   () => props.defect3DData,
+//   newDefectData => {
+//     defect3DData.value = [...newDefectData];
+//     updateChart();
+//   },
+//   { immediate: true, deep: true }
+// );
+// function updateChart() {
+//   // 检查图表实例是否存在
+//   if (!getInstance()) {
+//     console.error("图表实例不存在");
+//     return;
+//   }
 
-  // 获取当前的配置项
-  const currentOption = getInstance()!.getOption();
+//   // 获取当前的配置项
+//   const currentOption = getInstance()!.getOption();
 
-  // 修改系列（series）数据
-  currentOption.series[0].data = defect3DData.value;
-  currentOption.series[1].data = defect3DData.value;
-  getInstance()!.setOption(currentOption);
-}
+//   // 修改系列（series）数据
+//   currentOption.series[0].data = defect3DData.value;
+//   currentOption.series[1].data = defect3DData.value;
+//   getInstance()!.setOption(currentOption);
+// }
 watch(
   () => props,
   async () => {

src/pages/dataScreen/views/home/homeIndex.vue

@@ -16,6 +16,12 @@ import AlarmInfoList from "../../components/alarmInfoList.vue";
 import DeviceStatus from "../../components/deviceStatus.vue";
 import ComputingPowerPie from "./components/ComputingPowerPie.vue";
 import type { TabsPaneContext } from "element-plus";
+import {
+  getDataOverviewList,
+  getDeviceList,
+  getComputeConfigList,
+  getClassifyWarningsList
+} from "@/api/workbench";
 import dayjs from "dayjs";
 
 import { DsBox2 } from "@/components/DsBox";
@@ -149,8 +155,71 @@ const defect3DData = ref([100, 500, 400, 600, 700, 200]);
 const randomIntFn = (min: number, max: number) => {
   return Math.floor(Math.random() * (max - min + 1) + min);
 };
+const dataOverView = ref({
+  total_device: 0,
+  total_node: 0,
+  total_resource: "",
+  total_warning: 0
+});
+const deviceStatus = ref({
+  errorCount: 0,
+  onlineCount: 0,
+  outlineCount: 0,
+  processCount: 0
+});
+const computeUsed = ref([]);
+async function getListData() {
+  try {
+    // const { data } = await getModelList({});
+    const { data } = await getDataOverviewList();
+    dataOverView.value = data;
+    // 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;
+    computeUsed.value = data.compute_used;
+  } catch (e) {
+    console.log(e);
+  }
+}
 
+async function getListComputeConfig() {
+  try {
+    // const { data } = await getModelList({});
+    const { data } = await getComputeConfigList();
+    console.log(data);
+    // deviceStatus.value = data.device_status;
+    // computeUsed.value = data.compute_used;
+  } catch (e) {
+    console.log(e);
+  }
+}
+const getListClassifyWarnings = async () => {
+  try {
+    // const { data } = await getModelList({});
+    const { data } = await getClassifyWarningsList();
+
+    nextTick(() => {
+      defectData.value = data.defectData;
+      alarmData.value = data.alarmData;
+      defect3DData.value = data.defect3DData;
+    });
+    console.log(data);
+  } catch (e) {
+    console.log(e);
+  }
+};
 onMounted(() => {
+  getListClassifyWarnings();
+  getListData();
+  getListDevice();
+  getListComputeConfig();
   // intervalId.value = setInterval(() => {
   //   defectData.value = [
   //     randomIntFn(0, 500),
@@ -247,21 +316,21 @@ onUnmounted(() => {
       <div class="mid_box">
         <div class="mid_box_icon" />
         <div class="mid_box_info">
-          <span class="mid_box_info_top">1102</span>
+          <span class="mid_box_info_top">{{ dataOverView.total_warning }}</span>
           <span class="mid_box_info_bottom">异常总量</span>
         </div>
       </div>
       <div class="mid_box">
         <div class="mid_box_icon" />
         <div class="mid_box_info">
-          <span class="mid_box_info_top">467</span>
+          <span class="mid_box_info_top">{{ dataOverView.total_device }}</span>
           <span class="mid_box_info_bottom">设备总量</span>
         </div>
       </div>
       <div class="mid_box">
         <div class="mid_box_icon" />
         <div class="mid_box_info">
-          <span class="mid_box_info_top">3048</span>
+          <span class="mid_box_info_top">{{ dataOverView.total_node }}</span>
           <span class="mid_box_info_bottom">覆盖车间</span>
         </div>
       </div>
@@ -269,8 +338,9 @@ onUnmounted(() => {
         <div class="mid_box_icon" />
         <div class="mid_box_info">
           <span class="mid_box_info_top"
-            >893 <i class="font-normal text-base not-italic">TOPS</i></span
-          >
+            >{{ dataOverView.total_resource }}
+            <!-- <i class="font-normal text-base not-italic">TOPS</i> -->
+          </span>
           <span class="mid_box_info_bottom">资源使用</span>
         </div>
       </div>
@@ -280,7 +350,7 @@ onUnmounted(() => {
         <DsBox2 title="设备在线数量" type="w1h1" bgClass="bg_home_item1">
           <template #default>
             <div class="w-full px-[24px] py-[8px]">
-              <DeviceStatus />
+              <DeviceStatus :deviceStatus="deviceStatus" />
             </div>
           </template>
         </DsBox2>
@@ -290,7 +360,7 @@ onUnmounted(() => {
           <template #default>
             <div class="w-full h-full">
               <!-- 算力分配 -->
-              <ComputingPowerPie />
+              <ComputingPowerPie :data="computeUsed" />
             </div>
           </template>
         </DsBox2>

src/pages/dataScreen/views/modelList/components/ModelBox.vue

@@ -19,12 +19,12 @@ defineOptions({
 
 interface CardProductType {
   isEnabled: boolean;
-  state: string;
+  status: string;
   description: string;
-  deviceSort: string;
+  classification_name: string;
   updateTime: string;
-  type: string;
-  version: string;
+  model_type: string;
+  default_version: string;
   industry: string;
 }
 
@@ -36,7 +36,7 @@ const props = defineProps({
 
 const boxClass = computed(() => [
   "model-box-inUsed",
-  { "model-box-notUsed": props.modelData?.state !== "在线" }
+  { "model-box-notUsed": props.modelData?.status !== "1001" }
 ]);
 function getModelIcon(params: string) {
   if (
@@ -92,24 +92,24 @@ const handleClickDetail = (modelData: CardProductType) => {
 
 <template>
   <div :class="boxClass" @click="handleClickDetail(modelData)">
-    <div class="model-box-state" v-if="modelData.state === '在线'">使用中</div>
+    <div class="model-box-state" v-if="modelData.status === '1001'">使用中</div>
     <div class="model-box-title">
       <div class="model-box-name ff1">
-        {{ modelData.deviceSort }}
+        {{ modelData.classification_name }}
       </div>
       <div
         :class="
-          modelData.type === '经典算法'
+          modelData.model_type === '经典算法'
             ? 'model-box-type'
             : 'model-box-type-deep'
         "
       >
-        {{ modelData.type }}
+        {{ modelData.model_type }}
       </div>
     </div>
     <div class="model-box-version">
       <div class="model-box-version-icon" />
-      版本：{{ modelData.version }}
+      版本：{{ modelData.default_version }}
     </div>
     <div class="model-box-industry">
       <div class="model-box-industry-icon" />

src/pages/dataScreen/views/modelList/modelList.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 // import { getList } from "@/api/list";
-import { postModelList } from "@/api/list";
+// import { postModelList } from "@/api/list";
+import { getModelsList } from "@/api/model";
 import error from "@/assets/dataScreen/modelList/error.png";
 import loading from "@/assets/dataScreen/modelList/loading.png";
 import { ElLoading } from "element-plus";
 import "vue-waterfall-plugin-next/dist/style.css";
 import InfiniteLoading from "v3-infinite-loading";
 import { onMounted, reactive, ref, nextTick } from "vue";
-import backTop from "@/assets/svg/back_top.svg?component";
+// import backTop from "@/assets/svg/back_top.svg?component";
 import { Waterfall } from "vue-waterfall-plugin-next";
 import ModelBox from "./components/ModelBox.vue";
 
@@ -66,12 +67,12 @@ const isFinish = ref(false);
 const INITIAL_DATA = {
   index: null,
   industry: "",
-  state: "",
+  status: "",
   function: "",
-  deviceSort: "",
-  description: "",
-  version: "",
-  type: "",
+  classification_name: "",
+  comment: "",
+  default_version: "",
+  model_type: "",
   provider: "",
   updateTime: ""
 };
@@ -94,14 +95,28 @@ function loadList() {
     background: "transparent",
     text: "加载中"
   });
-  postModelList({
+  // postModelList({
+  //   page: page.value,
+  //   pageSize: pageSize.value
+  // }).then(res => {
+  //   console.log(res);
+  //   // pageTotal.value = res.data?.total || 0;
+  //   // setTimeout(() => {
+  //   //   list.value.push(...res.data.list);
+  //   //   page.value += 1;
+  //   //   nextTick(() => {
+  //   //     loadingInstance.value.close();
+  //   //   });
+  //   // }, 1000);
+  // });
+  getModelsList({
     page: page.value,
     pageSize: pageSize.value
   }).then(res => {
     console.log(res);
-    pageTotal.value = res.data?.total || 0;
+    pageTotal.value = res.data?.count || 0;
     setTimeout(() => {
-      list.value.push(...res.data.list);
+      list.value.push(...res.data.results);
       page.value += 1;
       nextTick(() => {
         loadingInstance.value.close();
@@ -167,26 +182,26 @@ onMounted(() => {
       <div class="modelListDialogBody">
         <div class="modelListDialogTitle">基本信息</div>
         <div class="modelListDialogContent">
-          模型名称:<span>{{ modelInfo.deviceSort }}</span>
+          模型名称:<span>{{ modelInfo.classification_name }}</span>
           <span
             :class="
-              modelInfo.type === '经典算法'
+              modelInfo.model_type === '经典算法'
                 ? 'model-box-type'
                 : 'model-box-type-deep'
             "
-            >{{ modelInfo.type }}</span
+            >{{ modelInfo.model_type }}</span
           >
-          模型版本:<span>{{ modelInfo.version }}</span
+          模型版本:<span>{{ modelInfo.default_version }}</span
           >适用行业:<span>{{ modelInfo.industry }}</span>
         </div>
         <div class="mb-3 modelListDialogContent">
           模型状态:<span class="modelListState">{{
-            modelInfo.state === "在线" ? "使用中" : "未使用"
+            modelInfo.status === "1001" ? "使用中" : "未使用"
           }}</span>
         </div>
         <div class="modelListDialogTitle">模型简介</div>
         <div class="modelListDialogContent">
-          {{ modelInfo.description }}
+          {{ modelInfo.comment }}
         </div>
       </div>
     </el-dialog>

src/pages/dataScreen/views/serverList/components/ServerBox.vue

@@ -8,16 +8,19 @@ defineOptions({
   name: "ServerBox"
 });
 
-interface CardProductType {
-  isEnabled: boolean;
-  state: string;
-  description: string;
-  deviceSort: string;
-}
+// interface CardProductType {
+//   isEnabled: boolean;
+//   state: string;
+//   description: string;
+//   deviceSort: string;
+// }
 
 const props = defineProps({
   serverData: {
-    type: Object as PropType<CardProductType>
+    type: Object,
+    default() {
+      return {};
+    }
   }
 });
 
@@ -25,7 +28,39 @@ const props = defineProps({
 //   "server-card",
 //   { "server-card_offline": props.serverData?.state === "离线" }
 // ]);
+const generateRandomTwoDecimal = value => {
+  // 生成一个在 [0, 1) 范围内的随机数
+  // const randomFraction = Math.random();
 
+  // 乘以一个倍数，例如 100，以增加小数位数
+  // const multipliedValue = randomFraction * 100;
+  const multipliedValue = value;
+
+  // 使用 Math.round() 进行四舍五入，并将结果除以倍数，得到两位小数
+  return Math.round(multipliedValue) / 100;
+};
+const progressData = ref([
+  {
+    label: "CPU",
+    percent: generateRandomTwoDecimal(props.serverData?.cpu),
+    strokeColor: "rgb(243,48,5)"
+  },
+  {
+    label: "内存",
+    percent: generateRandomTwoDecimal(props.serverData?.mem),
+    strokeColor: "rgb(33,169,122)"
+  },
+  {
+    label: "存储",
+    percent: generateRandomTwoDecimal(props.serverData?.storage),
+    strokeColor: "rgb(33,169,122)"
+  },
+  {
+    label: "GPU",
+    percent: generateRandomTwoDecimal(props.serverData?.gpu),
+    strokeColor: "rgb(250,173,20)"
+  }
+]);
 const stateClass = computed(() => [
   "server-box-title-state",
   { "server-box-title-state_offline": props.serverData?.state === "离线" }
@@ -36,7 +71,7 @@ const stateClass = computed(() => [
   <div class="server-box">
     <div class="flex items-center justify-start server-box-title">
       <span class="server-box-title-icon" />
-      <span class="server-box-title-name">{{ serverData?.deviceSort }}</span>
+      <span class="server-box-title-name">{{ serverData?.name }}</span>
       <span :class="stateClass">{{ serverData?.state }}</span>
     </div>
     <div class="server-box-content">
@@ -46,7 +81,7 @@ const stateClass = computed(() => [
       </div>
       <div class="server-box-content-right">
         <ul class="w-full">
-          <li v-for="(v, k) in serverData?.progressData" :key="k">
+          <li v-for="(v, k) in progressData" :key="k">
             <div class="flex items-center rectProgress_box">
               <span>
                 {{ v.label }}

src/pages/dataScreen/views/serverList/serverList.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { getServerBoxList, updateServerBoxList } from "@/api/list";
+import { getServerList } from "@/api/server";
 import error from "@/assets/dataScreen/modelList/error.png";
 import loading from "@/assets/dataScreen/modelList/loading.png";
 import { ElLoading } from "element-plus";
@@ -75,23 +76,23 @@ function handleLoadMore() {
     background: "transparent",
     text: "加载中"
   });
-  getServerBoxList({
+  getServerList({
     page: page.value,
     pageSize: pageSize.value
   }).then(res => {
     console.log(res);
     setTimeout(() => {
-      list.value.push(...res.data.list);
+      list.value.push(...res.data.results);
       page.value += 1;
       nextTick(() => {
         loadingInstance.value.close();
       });
-      if (timer.value) {
-        clearInterval(timer.value);
-      }
-      timer.value = setInterval(() => {
-        handleUpdateContent();
-      }, 3000);
+      // if (timer.value) {
+      //   clearInterval(timer.value);
+      // }
+      // timer.value = setInterval(() => {
+      //   handleUpdateContent();
+      // }, 3000);
     }, 1000);
   });
 }

src/views/alarm/index.vue

@@ -171,7 +171,7 @@ const listData = ref([]);
 // const searchValue = ref("");
 
 const formData = reactive({
-  node_name: "",
+  warning_name: "",
   warning_level: ""
 });
 
@@ -235,7 +235,7 @@ onMounted(() => {
     <el-form :inline="true" :model="formData" class="demo-form-inline">
       <el-form-item label="告警名称">
         <el-select
-          v-model="formData.node_name"
+          v-model="formData.warning_name"
           placeholder="告警名称"
           @change="getList"
           clearable

src/views/device/scene.vue

@@ -204,7 +204,15 @@ const resetForm = (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   formEl.resetFields();
 };
-
+const onPageSizeChange = (size: number) => {
+  pagination.value.pageSize = size;
+  pagination.value.currentPage = 1;
+  getAlarmList();
+};
+const onCurrentChange = (current: number) => {
+  pagination.value.currentPage = current;
+  getAlarmList();
+};
 function showFullAlert() {
   isShowFull.value = true;
   // getAlarmList();
@@ -390,6 +398,8 @@ onMounted(() => {
               color: 'rgba(51, 51, 51, 1)'
             }"
             :pagination="pagination"
+            @page-size-change="onPageSizeChange"
+            @page-current-change="onCurrentChange"
           >
             <template #image="{ row, index }">
               <el-image

src/views/modelList/index.vue

@@ -40,7 +40,10 @@ const onCurrentChange = (current: number) => {
 const getCardListData = async () => {
   try {
     // const { data } = await getModelList({});
-    const { data } = await getModelsList(pagination.value);
+    const { data } = await getModelsList({
+      page: pagination.value.current,
+      pageSize: pagination.value.pageSize
+    });
     deviceList.value = data.results;
     modelNum.value = data.count;
     console.log(data, "resData", data.results);

src/views/workbench/components/DeviceStatus.vue

@@ -16,13 +16,15 @@ defineOptions({
   name: "DeviceStatus"
 });
 
-const deviceStatusData = ref<Record<string, any>>({
-  onlineCount: 618,
-  errorCount: 2,
-  processCount: 118,
-  outlineCount: 20
+const props = defineProps({
+  deviceStatus: {
+    type: Object,
+    default: () => {}
+  }
 });
 
+const deviceStatusData = ref({ ...props.deviceStatus });
+
 const deviceStatusOptions = ref<Record<string, any>[]>([
   {
     label: "在线",

src/views/workbench/components/Notify.vue

@@ -7,79 +7,113 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <script setup lang="ts">
-import { ref } from "vue";
+import { WarningFilled, ArrowRightBold } from "@element-plus/icons-vue";
+import dayjs from "dayjs";
 // import type { TabsPaneContext } from "element-plus";
 
 defineOptions({
   name: "Notify"
 });
-
+const props = defineProps({
+  MessageData: {
+    type: Array,
+    default: () => []
+  }
+});
+console.log(props.MessageData);
 //TODO 模拟数据
 
-const urgencyStatus = [
-  {
-    label: "紧急",
-    value: 0,
-    color: "#E80D0D",
-    bgColor: "rgba(232, 13, 13, 0.10)"
-  },
-  {
-    label: "优先",
-    value: 0,
-    color: "#FE9A05",
-    bgColor: "rgba(254, 154, 5, 0.10)"
-  },
-  {
-    label: "普通",
-    value: 0,
-    color: "#52C41A",
-    bgColor: "rgba(82, 196, 26, 0.10)"
-  }
-];
+// const urgencyStatus = [
+//   {
+//     label: "紧急",
+//     value: 0,
+//     color: "#E80D0D",
+//     bgColor: "rgba(232, 13, 13, 0.10)"
+//   },
+//   {
+//     label: "优先",
+//     value: 0,
+//     color: "#FE9A05",
+//     bgColor: "rgba(254, 154, 5, 0.10)"
+//   },
+//   {
+//     label: "普通",
+//     value: 0,
+//     color: "#52C41A",
+//     bgColor: "rgba(82, 196, 26, 0.10)"
+//   }
+// ];
 
-function fetchNoticeList(readStatus = 1) {
-  const arr = [];
-  arr.push({
-    title: "系统消息" + (readStatus + 1),
-    dateTime: "今天10:03:00",
-    content: "A3号车间B01产线出现产品缺陷异常，请及时查看",
-    status: 0
-  });
-  arr.push({
-    title: "系统消息" + (readStatus + 1),
-    dateTime: "今天11:22:00",
-    content: "B1号车间监测有人员吸烟，请及时查看",
-    status: 1
-  });
-  return arr;
-  // for (let i = 0; i < 3; i++) {
+// function fetchNoticeList(readStatus = 1) {
+//   const arr = [];
 //   arr.push({
-  //     title: "系统消息" + (readStatus + i),
+//     title: "系统消息" + (readStatus + 1),
 //     dateTime: "今天10:03:00",
 //     content: "A3号车间B01产线出现产品缺陷异常，请及时查看",
-  //     status: Math.floor(Math.random(0, 2.9) * 3)
+//     status: 0
+//   });
+//   arr.push({
+//     title: "系统消息" + (readStatus + 1),
+//     dateTime: "今天11:22:00",
+//     content: "B1号车间监测有人员吸烟，请及时查看",
+//     status: 1
 //   });
-  // }
 //   return arr;
-}
+//   // for (let i = 0; i < 3; i++) {
+//   //   arr.push({
+//   //     title: "系统消息" + (readStatus + i),
+//   //     dateTime: "今天10:03:00",
+//   //     content: "A3号车间B01产线出现产品缺陷异常，请及时查看",
+//   //     status: Math.floor(Math.random(0, 2.9) * 3)
+//   //   });
+//   // }
+//   // return arr;
+// }
 
-const activeName = ref("1");
+// const activeName = ref("1");
 
-const noticeData = ref<Record<string, any>[]>([
-  {
-    label: "已读（10）",
-    list: fetchNoticeList(1)
-  },
-  {
-    label: "未读（15）",
-    list: fetchNoticeList(4)
-  }
-]);
+// const noticeData = ref<Record<string, any>[]>([
+//   {
+//     label: "已读（10）",
+//     list: fetchNoticeList(1)
+//   },
+//   {
+//     label: "未读（15）",
+//     list: fetchNoticeList(4)
+//   }
+// ]);
 </script>
 
 <template>
   <div class="w-full text-sm notify_wrap">
-    <el-tabs v-model="activeName" class="w-full">
+    <div
+      class="notify_box"
+      v-for="(item, index) in props.MessageData"
+      :key="index"
+    >
+      <div class="notify_box_left">
+        <el-icon color="#154DDD" :size="16">
+          <WarningFilled />
+        </el-icon>
+      </div>
+      <div class="notify_box_mid">
+        <div class="notify_box_mid_top mb-2">
+          <span class="text-[14px] text-[#333333] font-bold mr-2">{{
+            item.info_type
+          }}</span>
+          <span>{{
+            dayjs(item.trigger_time).format("YYYY-MM-DD HH:mm:ss")
+          }}</span>
+        </div>
+        <div class="notify_box_mid_bottom">{{ item.message }}</div>
+      </div>
+      <div class="notify_box_right">
+        <el-icon color="#666666" :size="16">
+          <ArrowRightBold />
+        </el-icon>
+      </div>
+    </div>
+    <!-- <el-tabs v-model="activeName" class="w-full">
       <el-tab-pane
         v-for="(item, index) in noticeData"
         :key="index"
@@ -108,14 +142,45 @@ const noticeData = ref<Record<string, any>[]>([
           </li>
         </ul>
       </el-tab-pane>
-    </el-tabs>
-    <div class="flex justify-center">
+    </el-tabs> -->
+    <!-- <div class="flex justify-center">
       <el-button type="primary">查看更多</el-button>
-    </div>
+    </div> -->
   </div>
 </template>
 <style lang="scss">
 .notify_wrap {
+  box-sizing: border-box;
+  padding: 0 12px;
+  .notify_box {
+    margin-bottom: 12px;
+    box-sizing: border-box;
+    padding: 12px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    height: 72px;
+    background: #f5f5f5;
+    border-radius: 4px 4px 4px 4px;
+    cursor: pointer;
+    .notify_box_left {
+      width: 28px;
+    }
+    .notify_box_right {
+      width: 28px;
+    }
+    .notify_box_mid {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .notify_box_mid_top {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+      }
+    }
+  }
   .el-tabs__item {
     padding: 0 20px !important;
   }

src/views/workbench/components/chart/bar.vue

@@ -37,7 +37,7 @@ const name = [
   "11月",
   "12月"
 ];
-const value = [100, 500, 400, 600, 700, 200, 100, 500, 400, 600, 700, 200];
+// const value = [100, 500, 400, 600, 700, 200, 100, 500, 400, 600, 700, 200];
 // const toolTims = null;
 const offsetX = 16;
 const offsetY = 8;
@@ -274,7 +274,7 @@ watch(
               ]
             };
           },
-          data: value
+          data: props.requireData
         },
         {
           // name: "",
@@ -295,7 +295,7 @@ watch(
             color: "transparent"
           },
           tooltip: {},
-          data: value
+          data: props.requireData
         }
       ]
     });

src/views/workbench/components/chart/pie.vue

@@ -1,12 +1,7 @@
 <script setup lang="ts">
-import { ref, computed, watch, type Ref } from "vue";
-import { useAppStoreHook } from "@/store/modules/app";
-import {
-  delay,
-  useDark,
-  useECharts,
-  type EchartOptions
-} from "@pureadmin/utils";
+import { ref, computed, watch, type Ref, nextTick } from "vue";
+// import { useAppStoreHook } from "@/store/modules/app";
+import { useDark, useECharts, type EchartOptions } from "@pureadmin/utils";
 
 const { isDark } = useDark();
 
@@ -15,10 +10,20 @@ const theme: EchartOptions["theme"] = computed(() => {
 });
 
 const pieChartRef = ref<HTMLDivElement | null>(null);
-const { setOptions, resize } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
+const { setOptions } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
   theme
 });
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => []
+  }
+});
 
+watch(
+  () => props,
+  async () => {
+    await nextTick();
     setOptions(
       {
         // title: {
@@ -136,10 +141,11 @@ setOptions(
                 }
               }
             },
-        data: [
-          { value: 22, name: "未占用" },
-          { value: 78, name: "已占用" }
-        ],
+            // data: [
+            //   { value: 22, name: "未占用" },
+            //   { value: 78, name: "已占用" }
+            // ],
+            data: props.data,
             emphasis: {
               itemStyle: {
                 shadowBlur: 10,
@@ -165,13 +171,19 @@ setOptions(
         }
       }
     );
-
-watch(
-  () => useAppStoreHook().getSidebarStatus,
-  () => {
-    delay(600).then(() => resize());
+  },
+  {
+    deep: true,
+    immediate: true
   }
 );
+
+// watch(
+//   () => useAppStoreHook().getSidebarStatus,
+//   () => {
+//     delay(600).then(() => resize());
+//   }
+// );
 </script>
 
 <template>

src/views/workbench/index.vue

@@ -3,6 +3,13 @@ import ReCol from "@/components/ReCol";
 import { barChart, pieChart, pie3DChart } from "./components/chart";
 import DeviceStatus from "./components/DeviceStatus.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 dataViewIcon1 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]
 //   }
 // ];
-const pie3Ddata = {
-  data: [
-    { name: "紧急", value: 30 },
-    { name: "较高", value: 10 },
-    { name: "一般", value: 60 }
-  ]
-};
+// const pie3Ddata = {
+//   data: [
+//     { name: "紧急", value: 30 },
+//     { name: "较高", value: 10 },
+//     { name: "一般", value: 60 }
+//   ]
+// };
 
 // 数据预览
 // TODO 图标需要替换
-const dataViewList = [
+const dataViewList = ref([
   {
     label: "异常总量",
-    value: "110200",
+    value: 110200,
     color: "#FF861A",
     bgColor: "#FFE9D6",
     bigBgColor: "#FFFAF5",
@@ -48,7 +55,7 @@ const dataViewList = [
   },
   {
     label: "设备总量",
-    value: "46700",
+    value: 46700,
     color: "#5786FF",
     bgColor: "#D6E0FF",
     bigBgColor: "#F5F8FF",
@@ -58,7 +65,7 @@ const dataViewList = [
   },
   {
     label: "覆盖车间",
-    value: "40",
+    value: 40,
     color: "#5024FE",
     bgColor: "#DDD5FD",
     bigBgColor: "#F5F3FD",
@@ -77,7 +84,78 @@ const dataViewList = [
 
     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>
 
 <template>
@@ -201,7 +279,9 @@ const dataViewList = [
           :body-style="{ padding: '16px' }"
         >
           <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>
       </re-col>
       <re-col
@@ -230,7 +310,7 @@ const dataViewList = [
         >
           <span :class="headStyles">设备告警情况</span>
           <div class="flex justify-between h-[210px]">
-            <pie3DChart :data="pie3Ddata.data" />
+            <pie3DChart :data="deviceWarning" />
           </div>
         </el-card>
       </re-col>
@@ -260,7 +340,7 @@ const dataViewList = [
         >
           <span :class="headStyles">算力占用</span>
           <div class="flex justify-between h-[210px]">
-            <pieChart />
+            <pieChart :data="computeUsed" />
           </div>
         </el-card>
       </re-col>
@@ -291,7 +371,7 @@ const dataViewList = [
         >
           <span :class="headStyles">违规总量</span>
           <div class="flex justify-between h-[265px]">
-            <barChart />
+            <barChart :requireData="barData" />
           </div>
         </el-card>
       </re-col>
@@ -317,7 +397,7 @@ const dataViewList = [
         <el-card class="line-card" shadow="always" :body-style="{ padding: 0 }">
           <span :class="headStyles" class="mt-3 ml-4 mb-0">消息通知</span>
           <div class="flex justify-between h-[285px]">
-            <Notify />
+            <Notify :MessageData="MessageData" />
           </div>
         </el-card>
       </re-col>