BUG修复—1

src/utils/chart.js

@@ -213,7 +213,7 @@ export const getLineOption2 = (xData = [], seriesData = [], legendDesc = "健康
     trigger: "axis",
   },
   grid: {
-    left: "5%",
+    left: "12%",
     right: "5%",
     bottom: "15%",
     top: "20%",

src/views/dustMonitoring/components/healthyProgress.vue

@@ -2,11 +2,13 @@
   <!-- 方形进度条 -->
   <div class="healthy-progress">
     <div
-      class="h-8 bg-slate-800/60 test rounded overflow-hidden border border-slate-700 healthy-progress-bar"
+      class="h-8 bg-slate-800/60 rounded overflow-hidden border border-slate-700 healthy-progress-bar"
+      :class="borderColor"
     >
       <div
         id="square-progress-bar"
-        class="healthy-progress-bar h-full transition-all duration-500 ease-out bg-gradient-to-r from-secondary to-green-400 diagonal-pattern diagonal-pattern-animation"
+        class="healthy-progress-bar h-full transition-all duration-500 ease-out bg-gradient-to-r from-secondary to-green-400 diagonal-pattern-animation"
+        :class="diagonalPatternColor"
       ></div>
       <div class="justify-between items-center mb-2 healthy-text-position">
         <span class="font-semibold">健康度:</span>
@@ -20,16 +22,50 @@
   </div>
 </template>
 <script setup>
-import { onMounted, watch } from "vue";
+import { computed, onMounted, watch, ref } from "vue";
 const props = defineProps({
   progress: {
     type: Number,
     default: 100,
   },
 });
-watch(() => props.progress, (newProgress) => {
-  init()
+
+const borderColor = computed(() => {
+  if (props.progress < 60) {
+    return 'box-color-60'
+  } else if (props.progress < 90) {
+    return 'box-color-90'
+  }
+  return 'box-color-default'
+});
+const diagonalPatternColor = computed(() => {
+  if (props.progress < 60) {
+    return 'diagonal-pattern-60'
+  } else if (props.progress < 90) {
+    return 'diagonal-pattern-90'
+  }
+  return 'diagonal-pattern-default'
 });
+const customColors = [
+  { color: "#ff6a6a", percentage: 60 },
+  { color: "#f5c701", percentage: 80 },
+  { color: "#08c733", percentage: 100 },
+];
+const customColorMethod = (percentage) => {
+  if (percentage < 60) {
+    return customColors[0].color;
+  }
+  if (percentage < 90) {
+    return customColors[1].color;
+  }
+  return customColors[2].color;
+};
+watch(
+  () => props.progress,
+  (newProgress) => {
+    init();
+  }
+);
 tailwind.config = {
   theme: {
     extend: {
@@ -64,15 +100,23 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.test {
+.box-color-60 {
+  background-color: #fff;
+  border-color: rgba(255, 106, 106, 1);
+}
+.box-color-90 {
   background-color: #fff;
-  border-color: rgba(6, 241, 14, 0.829);
+  border-color: rgba(245, 199, 1, 1);
+}
+.box-color-default {
+  background-color: #fff;
+  border-color: rgba(8, 199, 51, 1);
 }
 .healthy-text-position {
   position: absolute;
   z-index: 99;
   top: 50%;
-  left:0;
+  left: 0;
   transform: translateY(-50%);
   padding-left: 10px;
 }
@@ -83,4 +127,36 @@ onMounted(() => {
   height: calc(100%);
   position: relative;
 }
+</style>
+<style>
+.diagonal-pattern-60 {
+  background-image: repeating-linear-gradient(
+    45deg,
+    rgba(255, 106, 106, 1),
+    rgba(255, 106, 106, 1) 10px,
+    rgba(255, 106, 106, 1) 15px,
+    rgba(255, 255, 255, 0.1) 20px
+  );
+  background-size: 28px 28px;
+}
+.diagonal-pattern-90 {
+  background-image: repeating-linear-gradient(
+    45deg,
+    rgba(245, 199, 1, 1),
+    rgba(245, 199, 1, 1) 10px,
+    rgba(245, 199, 1, 1) 15px,
+    rgba(255, 255, 255, 0.1) 20px
+  );
+  background-size: 28px 28px;
+}
+.diagonal-pattern-default {
+  background-image: repeating-linear-gradient(
+    45deg,
+    rgba(8, 199, 51, 1),
+    rgba(8, 199, 51, 1) 10px,
+    rgba(8, 199, 51, 1) 15px,
+    rgba(8, 199, 51, 0.1) 20px
+  );
+  background-size: 28px 28px;
+}
 </style>
\ No newline at end of file

src/views/dustMonitoring/index.vue

@@ -70,31 +70,19 @@
           </div>
           <div class="position-info">
             <div class="left" v-if="detailObj.compartHealthList.length > 0">
-              <div class="part">
+              <div class="part" v-for="(list, index) in detailObj.compartHealthList" :key="index">
                 <div
                   class="point"
                   :class="{
                     'status-normal': item.healthStatus === 1,
-                    'status-warning': item.healthStatus === 2,
-                    'status-error': item.healthStatus === 3,
+                    'status-error': item.healthStatus === 2,
+                    'status-warning': item.healthStatus === 3,
                   }"
-                  v-for="item in detailObj.compartHealthList[0]"
+                  v-for="item in detailObj.compartHealthList[index]"
                   :key="item"
                   @click="handleStatusDotClick()"
                 ></div>
               </div>
-              <div class="part">
-                <div
-                  class="point"
-                  :class="{
-                    'status-normal': item.healthStatus === 1,
-                    'status-warning': item.healthStatus === 2,
-                    'status-error': item.healthStatus === 3,
-                  }"
-                  v-for="item in detailObj.compartHealthList[1]"
-                  :key="item"
-                ></div>
-              </div>
             </div>
             <!-- <div class="right">
               <div class="part">
@@ -607,7 +595,6 @@ $borderColor: #bbbdc391;
   box-sizing: border-box;
   padding: 1rem;
   overflow: hidden;
-  overflow-y: auto;
 }
 .top-box {
   padding-top: 18px;

src/views/equipmentManagement/index.vue

@@ -175,6 +175,11 @@ const tableColumns = ref([
     label: "设备名称",
     width: "5%",
   },
+  {
+    prop: "deviceNo",
+    label: "设备编码",
+    width: "5%",
+  },
   {
     prop: "deviceTypeDesc",
     label: "设备类型",