perf: 行业关键词动向样式调整

src/views/components/dataEngine/keyWord.vue

@@ -20,9 +20,9 @@
         :columns="columns"
         :data="dataList"
         :filter-icon-align-left="alignLeft"
-        @change="handleChange"
         :scroll="true"
         :pagination="false"
+        @change="handleChange"
       >
         <template #heatLevel>
           <a-space>
@@ -85,23 +85,11 @@
           />
         </template>
         <template #tred="{ record }">
-          <a-statistic
+          <div class="flex items-center justify-end" :class="record.trend >= 0 ? 'color-#f64b31' : 'color-#25c883'">
-            style="font-size: 14px"
+            <icon-arrow-up v-if="record.trend >= 0" size="16" />
-            v-if="record.trend > 0"
+            <icon-arrow-down v-else size="16" />
-            :value="record.trend * 100"
+            {{ `${record.trend === 0 ? 0 : Math.abs(record.trend * 100)}%` }}
-            :value-style="{ color: '#F64B31' }"
+          </div>
-          >
-            <template #prefix>
-              <icon-arrow-rise />
-            </template>
-            <template #suffix>%</template>
-          </a-statistic>
-          <a-statistic
-            v-else
-            style="font-size: 14px"
-            :value="record.trend * 100"
-            :value-style="{ color: '#25C883' }"
-          ></a-statistic>
         </template>
       </a-table>
     </a-space>
@@ -126,7 +114,7 @@
         <a-space>
           <a-space style="width: 320px">
             <div id="container" style="height: 180px; width: 180px"></div>
-            <a-space direction="vertical" style="font-size: 14px" v-if="fellingRate.length > 0">
+            <a-space v-if="fellingRate.length > 0" direction="vertical" style="font-size: 14px">
               <a-space>
                 <span style="width: 8px; height: 8px; background-color: #25c883; border-radius: 50%"></span>
                 <span>正面情绪 </span>
@@ -144,9 +132,9 @@
             :data="rowData"
             :span-method="spanMethod"
             :filter-icon-align-left="alignLeft"
-            @change="handleChange"
             :scroll="true"
             :pagination="false"
+            @change="handleChange"
           >
             <template #felling="{ record }">
               <img
@@ -188,9 +176,9 @@
         :columns="columns3"
         :data="keywordList"
         :filter-icon-align-left="alignLeft"
-        @change="handleChange"
         :scroll="true"
         :pagination="false"
+        @change="handleChange"
       >
         <template #rank="{ record }">
           <img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
@@ -254,10 +242,10 @@
         </template>
         <template #tred="{ record }">
           <a-statistic
+            v-if="record.trend > 0"
             style="font-size: 14px"
             :value="record.trend * 100"
             :value-style="{ color: '#F64B31' }"
-            v-if="record.trend > 0"
           >
             <template #prefix>
               <icon-arrow-rise />
@@ -277,7 +265,7 @@
       </a-table>
     </a-space>
     <!-- modal -->
-    <a-modal :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose>
+    <a-modal :visible="visible" unmountOnClose @ok="handleOk" @cancel="handleCancel">
       <template #title>
         <span style="text-align: left; width: 100%">新兴关键词</span>
       </template>
@@ -594,12 +582,12 @@ const getNewKeywordList = async () => {
 };
 
 const drawChart = () => {
-  var dom = document.getElementById('container');
+  let dom = document.getElementById('container');
-  var myChart = echarts.init(dom, null, {
+  let myChart = echarts.init(dom, null, {
     renderer: 'canvas',
     useDirtyRect: false,
   });
-  var option;
+  let option;
   option = {
     color: ['#25C883', '#F64B31'],
     series: [