master: Fixed 修复告警 以及样式问题

src/views/dashboard/workplace/components/broadband-chart.vue

@@ -207,6 +207,6 @@
 
 <style scoped>
   :deep(.arco-select-view-single) {
-    background-color: var(--color-neutral-3);
+    background-color: var(--color-neutral-3) !important;
   }
 </style>

src/views/preview-list/children/preview-info.vue

@@ -617,35 +617,42 @@
     // w: 680;
     // x: 1454;
     // y: 19;
-    const newAlarmData = alarmLog.map((item: any, i: number) => {
-      return {
-        ...item,
-        Name: item.AlgorithmName,
-        type: item.AlgorithmName,
-        status: 0,
-        isRead: false,
-        img: `${app.ip}/rpc/rabbitMQ/KunPengYun/Files/${record.src}&GUID=${props.data.id}`,
-        tImg: `${app.ip}/rpc/rabbitMQ/KunPengYun/Files/${record.src}&GUID=${props.data.id}`,
-        imgJson: {
-          imageHeight: 3840,
-          imageWidth: 2160,
-          resultData: {
-            objectList: [
-              {
-                rect: {
-                  ...alarmLog[i],
-                  width: alarmLog[i].w,
-                  height: alarmLog[i].h,
+    record.loading = true;
+    const img = document.createElement('img');
+    img.src = `${app.ip}/rpc/rabbitMQ/KunPengYun/Files/${record.src}&GUID=${props.data.id}`;
+    img.onload = () => {
+      const [w, h] = [img.width, img.height];
+      const newAlarmData = alarmLog.map((item: any, i: number) => {
+        return {
+          ...item,
+          Name: item.AlgorithmName,
+          type: item.AlgorithmName,
+          status: 0,
+          isRead: false,
+          img: img.src,
+          tImg: img.src,
+          imgJson: {
+            imageHeight: h,
+            imageWidth: w,
+            resultData: {
+              objectList: [
+                {
+                  rect: {
+                    ...alarmLog[i],
+                    width: alarmLog[i].w,
+                    height: alarmLog[i].h,
+                  },
                 },
-              },
-            ],
+              ],
+            },
           },
-        },
-      };
-    });
-    const [firstAlarmData] = newAlarmData;
-    viewData.value = firstAlarmData;
-    viewDrawerRef.value.open();
+        };
+      });
+      const [firstAlarmData] = newAlarmData;
+      viewData.value = firstAlarmData;
+      viewDrawerRef.value.open();
+      record.loading = false;
+    };
   };
   watch(
     radioActive,

src/views/preview-list/components/view-alarm.vue

@@ -74,6 +74,8 @@
   const init = () => {
     const canvas = document.createElement('canvas');
     const { imgJson, img } = props.data;
+    console.log(imgJson);
+
     canvas.width = imgJson.imageWidth;
     canvas.height = imgJson.imageHeight;
 
@@ -83,7 +85,7 @@
     imgObj.src = img;
     imgObj.onload = () => {
       if (ctx) {
-        ctx.drawImage(imgObj, 0, 0);
+        ctx.drawImage(imgObj, 0, 0, canvas.width, canvas.height);
         imgJson.resultData.objectList.forEach((item: any) => {
           // 绘制矩形
           ctx.strokeStyle = 'red';