feat：对接消息相关接口

src/views/workOrder/components/box-2.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="work-box-2">
     <div class="box-1">
-      <Title1 title="今日工单" />
+      <div>
+        <Title1 title="今日工单" />
+      </div>
       <div class="hd-list">
         <img class="h-icon" src="@/assets/images/work-icon-1.png" />
         <div class="item item1">
@@ -21,7 +23,7 @@
         </div>
       </div>
       <div class="chart">
-        <div class="chart__wrapper">
+        <div class="chart__wrapper mr-8">
           <Title3 title="工单总数" />
           <!-- <div class="check-label">
             <span class="active">全部</span>
@@ -55,7 +57,7 @@
               </div>
             </div>
             <div class="progress-item">
-              <span class="progress-item__label">紧急</span>
+              <span class="progress-item__label">重要</span>
               <div class="progress-item__inner">
                 <el-progress
                   :percentage="completeRateData.important * 100"
@@ -86,11 +88,11 @@
           </div>
         </div>
         <div class="chart__wrapper">
-          <Title3 title="景区工单占比" />
+          <Title3 title="景区工单类型占比" />
           <div class="chart__inner">
-            <spotRate :dataList="spotRateData" :total="8888" />
+            <spotRate :dataList="typeRateData" :total="8888" />
             <ul class="chart__legend">
-              <li class="chart__legend-item" v-for="(item, index) in spotRateData" :key="index">
+              <li class="chart__legend-item" v-for="(item, index) in typeRateData" :key="index">
                 <p class="dot" :style="{ background: colors[index] }" />
                 <p class="name">{{ item.name }}</p>
                 <p class="value">{{ item.value }}%</p>
@@ -99,7 +101,7 @@
             <div class="alarm">
               <Title2 title="异常点位告警排名" />
               <ul class="alarm__wrapper">
-                <li class="alarm-item" v-for="(item, index) in 8" :key="index">
+                <li class="alarm-item" v-for="(item, index) in pointRankData" :key="index">
                   <p
                     class="alarm-item__rank"
                     :class="{
@@ -108,9 +110,9 @@
                       'alarm-item__rank--primary': index == 2
                     }"
                   >
-                    {{ item }}
+                    {{ index + 1 }}
                   </p>
-                  <p class="alarm-item__content">异常点位告警1号名称</p>
+                  <p class="alarm-item__content">{{ item.link_title }}</p>
                 </li>
               </ul>
             </div>
@@ -131,7 +133,8 @@
     getCompleteRateApi,
     getSpotRateApi,
     getTypeRateApi
-  } from '@/api/workOrder.js'
+  } from '@/api/workOrder'
+  import { getNewsPointRankApi } from '@/api/news'
 
   const colors = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
   let totalData = ref({
@@ -146,7 +149,13 @@
   let xAxisData = ref([])
   let typeRateData = ref([])
   let spotRateData = ref([])
+  let pointRankData = ref([])
 
+  const getNewsPointRank = async () => {
+    let res = await getNewsPointRankApi()
+    pointRankData.value = res.data
+    console.log(res, '1111')
+  }
   const getTypeRate = async () => {
     let res = await getTypeRateApi()
     typeRateData.value = res.data.data
@@ -174,6 +183,7 @@
     getCompleteRate()
     getTypeRate()
     getSpotRate()
+    getNewsPointRank()
   })
 </script>
 
@@ -219,14 +229,13 @@
     }
   }
   .work-box-2 {
-    width: vw(1522);
     margin-top: vh(120);
-    margin-left: vw(10);
-    position: relative;
-    z-index: 99;
+    margin-left: vw(8);
+
     .box-1 {
-      height: vh(500);
-      background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
+      padding: vw(1) 0;
+      box-sizing: border-box;
+      background: linear-gradient(to bottom, #0b2f64 0%, #062b57 100%);
       .chart {
         display: flex;
         justify-content: space-between;
@@ -313,7 +322,9 @@
       }
     }
     .box-2 {
-      height: vh(434);
+      padding: vw(1);
+      height: vh(442);
+      box-sizing: border-box;
       background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
 
       .chart {