feat: 页面样式修改

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

@@ -23,6 +23,19 @@ const { setOptions, resize } = useECharts(
   }
 );
 
+const props = defineProps({
+  dateData: {
+    type: Array as PropType<Array<number>>,
+    default: () => []
+  }
+  // defectData: {
+  //   type: Array as PropType<Array<number>>,
+  //   default: () => []
+  // }
+});
+
+const dateData = ref([...props.dateData]);
+
 setOptions(
   {
     title: {
@@ -85,7 +98,7 @@ setOptions(
           fontSize: 12 //更改坐标轴文字大小
           // }
         },
-        data: ["10.15", "10.16", "10.17", "10.18", "10.19"]
+        data: dateData.value
       }
     ],
     yAxis: [

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

@@ -75,16 +75,16 @@ setOptions(
         },
         labelLine: {
           show: true,
-          length: 20,
+          length: 15,
-          length2: 25
+          length2: 15
         },
         name: "",
         data: [
-          { value: 15, name: "表面缺陷" },
+          { value: 15, name: "螺纹缺陷检测" },
-          { value: 40, name: "晶圆缺陷" },
+          { value: 40, name: "PIN间距测量" },
-          { value: 20, name: "划伤检测" },
+          { value: 20, name: "压板缺陷检测" },
-          { value: 15, name: "披锋缺陷" },
+          { value: 15, name: "划伤缺陷检测" },
-          { value: 10, name: "崩边缺陷" }
+          { value: 10, name: "工件尺寸测量" }
         ]
         // label: {
         //   formatter: function (params) {

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch, type Ref } from "vue";
+import { ref, computed, watch, type Ref, onMounted } from "vue";
 import { useAppStoreHook } from "@/store/modules/app";
 import {
   delay,
@@ -8,6 +8,7 @@ import {
   type EchartOptions
 } from "@pureadmin/utils";
 import * as echarts from "echarts/core";
+import { useIntervalFn } from "@vueuse/core";
 
 const { isDark } = useDark();
 
@@ -16,13 +17,58 @@ const theme: EchartOptions["theme"] = computed(() => {
 });
 
 const defectLineChartRef = ref<HTMLDivElement | null>(null);
-const { setOptions, resize } = useECharts(
+const { setOptions, resize, getInstance } = useECharts(
   defectLineChartRef as Ref<HTMLDivElement>,
   {
     theme
   }
 );
 
+const props = defineProps({
+  dateData: {
+    type: Array as PropType<Array<number>>,
+    default: () => []
+  },
+  defectData: {
+    type: Array as PropType<Array<number>>,
+    default: () => []
+  }
+});
+
+const dateData = ref([...props.dateData]);
+const defectData = ref([...props.defectData]);
+// const defectData = computed(() => [...props.defectData]);
+// const defectData = computed(() => {
+//   console.log(props.dateData, "11");
+
+//   return props.defectData.map((item: any) => {
+//     return item.value;
+//   });
+// });
+// useIntervalFn(() => {
+//   console.log(getInstance(),'');
+// }, 2000);
+// watch(
+//   () => props.defectData,
+//   (newDefectData, oldDefectData) => {
+//     // ... 回调函数逻辑 ...
+//     console.log(newDefectData, "oldDefectData");
+//     defectData.value = JSON.parse(JSON.stringify(newDefectData));
+//     // updateChart()
+//     console.log(defectData.value, "watch");
+//   },
+//   { immediate: true, deep: true } // 立即执行回调
+// );
+onMounted(() => {
+  console.log(defectData.value);
+  console.log(getInstance());
+});
+function updateChart() {
+  getInstance()!.dispatchAction({
+    type: "series",
+    data: defectData.value
+  });
+}
 setOptions(
   {
     title: {
@@ -83,7 +129,7 @@ setOptions(
           fontSize: 12 //更改坐标轴文字大小
           // }
         },
-        data: ["1.15", "1.16", "1.17", "1.18", "1.19"]
+        data: dateData.value
       }
     ],
     yAxis: [
@@ -120,7 +166,7 @@ setOptions(
         name: "缺陷总数",
         type: "line",
         yAxisIndex: 0,
-        data: [46, 460, 100, 300, 20],
+        data: defectData.value,
         smooth: true,
         // showSymbol: false,/
         symbolSize: 8,

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

@@ -7,7 +7,7 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <script setup lang="ts">
-import { reactive, ref } from "vue";
+import { reactive, ref, onMounted, nextTick } from "vue";
 import AlarmLine from "./components/AlarmLine.vue";
 import DefectLine from "./components/DefectLine.vue";
 import DefectBar3D from "./components/DefectBar3D.vue";
@@ -16,6 +16,7 @@ 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 dayjs from "dayjs";
 
 import { DsBox2 } from "@/components/DsBox";
 
@@ -81,6 +82,33 @@ const activeName = ref("first");
 const handleClick = (tab: TabsPaneContext, event: Event) => {
   console.log(tab);
 };
+
+// 获取最近五天日期
+const recentDates = ref(
+  Array.from({ length: 5 }, (_, index) =>
+    dayjs().subtract(index, "day").format("M.DD")
+  ).reverse()
+);
+
+// 缺陷总数折线图
+const intervalId = ref(null);
+const defectData = ref([46, 460, 100, 300, 20]);
+const randomIntFn = (min: number, max: number) => {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+};
+
+onMounted(() => {
+  // setInterval(() => {
+  //   defectData.value = [
+  //     randomIntFn(0, 500),
+  //     randomIntFn(0, 500),
+  //     randomIntFn(0, 500),
+  //     randomIntFn(0, 500),
+  //     randomIntFn(0, 500)
+  //   ];
+  //   // console.log(defectData.value);
+  // }, 2000);
+});
 </script>
 <template>
   <div class="flex justify-between w-full ds_home_wrap">
@@ -89,7 +117,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
         <DsBox2 title="分类告警" type="w1h1" bgClass="bg_home_item1">
           <template #default>
             <div class="w-full h-full">
-              <AlarmLine />
+              <AlarmLine :dateData="recentDates" />
             </div>
           </template>
         </DsBox2>
@@ -98,7 +126,7 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
         <DsBox2 title="总缺陷数" type="w5h1" bgClass="bg_home_item2">
           <template #default>
             <div class="w-full h-[244px]">
-              <DefectLine />
+              <DefectLine :dateData="recentDates" :defectData="defectData" />
             </div>
             <div class="w-full h-[270px]">
               <div class="w-full h-[40px]">
@@ -107,12 +135,11 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
                   class="demo-tabs"
                   @tab-click="handleClick"
                 >
-                  <el-tab-pane label="A项目缺陷数" name="first" />
+                  <el-tab-pane label="螺纹缺陷检测" name="first" />
-                  <el-tab-pane label="B项目缺陷数" name="second" />
+                  <el-tab-pane label="PIN间距测量" name="second" />
-                  <el-tab-pane label="C项目缺陷数" name="third" />
+                  <el-tab-pane label="压板缺陷检测" name="third" />
-                  <el-tab-pane label="D项目缺陷数" name="fourth" />
+                  <el-tab-pane label="划伤缺陷检测" name="fourth" />
-                  <el-tab-pane label="E项目缺陷数" name="first1" />
+                  <el-tab-pane label="工件尺寸测量" name="fifth" />
-                  <el-tab-pane label="F项目缺陷数" name="second1" />
                 </el-tabs>
               </div>
               <DefectBar3D />
@@ -150,7 +177,9 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
       <div class="mid_box">
         <div class="mid_box_icon" />
         <div class="mid_box_info">
-          <span class="mid_box_info_top">893</span>
+          <span class="mid_box_info_top"
+            >893 <i class="font-normal text-base not-italic">TOPS</i></span
+          >
           <span class="mid_box_info_bottom">资源使用</span>
         </div>
       </div>

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

@@ -2,6 +2,7 @@
 import { computed, PropType, ref } from "vue";
 import { AnimationPic } from "@/components/AnimationCard";
 import serverIcon from "@/assets/animate/device/dataScreenServer.json";
+import serverIconOffline from "@/assets/dataScreen/serverList/serverIcon_offline.svg?component";
 
 defineOptions({
   name: "ServerBox"
@@ -74,7 +75,8 @@ const progressData = ref([
     </div>
     <div class="server-box-content">
       <div class="server-box-content-left">
-        <AnimationPic :value="serverIcon" />
+        <AnimationPic :value="serverIcon" v-if="serverData?.state == '在线'" />
+        <serverIconOffline v-else />
       </div>
       <div class="server-box-content-right">
         <ul class="w-full">
@@ -89,7 +91,7 @@ const progressData = ref([
                   :show-text="false"
                   :stroke-width="10"
                   :percentage="100 * v.percent"
-                  :color="v.strokeColor"
+                  :color="serverData?.state == '在线' ? v.strokeColor : '#ccc'"
                 />
               </div>
             </div>

src/views/modelList/components/ModelCard.vue

@@ -13,6 +13,7 @@ interface CardProductType {
   deviceSort: string;
   updateTime: string;
   type: number;
+  industry: number;
 }
 
 const props = defineProps({
@@ -21,6 +22,47 @@ const props = defineProps({
   }
 });
 
+function getModelIcon(params: string) {
+  if (
+    params == "电子、手机、SMT" ||
+    params == "手机、电子、手机、工件装配、SMT" ||
+    params == "手机、电子、SMT" ||
+    params == "手机、液晶显示屏"
+  ) {
+    return model_mark;
+  } else if (
+    params ==
+    "机械、金属工件、线缆、铸造、薄膜、玻璃、造纸、铝板带、铝箔、铜箔、无纺布"
+  ) {
+    return model_colour;
+  } else if (
+    params == "PVC管材、金属管材、金属工件、塑料水管、汽车软管、线缆"
+  ) {
+    return model_colour;
+  } else if (params == "锂电池") {
+    return model_colour;
+  } else if (params == "食品、饮料、医疗卫生" || params == "食品、饮料") {
+    return model_colour;
+  } else if (params == "陶瓷、卫浴、瓷砖") {
+    return model_colour;
+  } else if (
+    params == "机加工、光伏、电子、SMT、手机、锂电池、精密零部件加工" ||
+    params == "光伏"
+  ) {
+    return model_colour;
+  } else if (params == "钢铁、冶金、铸造") {
+    return model_colour;
+  } else if (params == "银行、营业厅") {
+    return model_colour;
+  } else if (params == "机加工、电子、手机、精密零部件加工、汽车") {
+    return model_colour;
+  } else if (params == "PCB") {
+    return model_colour;
+  } else {
+    return model_OCR;
+  }
+}
+
 const cardClass = computed(() => [
   "model-card",
   { "model-card_offline": props.device?.state === "离线" }
@@ -37,9 +79,7 @@ const cardClass = computed(() => [
     <div class="model-header">
       <div class="model-name">{{ device?.deviceSort }}</div>
       <div class="model-icon">
-        <img :src="model_OCR" alt="" v-if="device?.type === 1" />
+        <img :src="getModelIcon(device?.industry)" />
-        <img :src="model_mark" alt="" v-else-if="device?.type === 2" />
-        <img :src="model_colour" alt="" v-else />
       </div>
     </div>
     <div class="model-content">