提交

src/views/TraditionalAssessment/index.vue

@@ -12,7 +12,7 @@
         />
       </el-form-item>
       <el-form-item style="float: right">
-        <el-button type="primary" @click="getData">查询</el-button>
+        <el-button type="primary" @click="()=>getData(date)">查询</el-button>
         <el-button type="primary" @click="exportFile">导出</el-button>
       </el-form-item>
     </el-form>
@@ -20,35 +20,44 @@
   <br />
   <br />
   <el-card>
-    <div v-for="item in list" :key="item.channelName">
-      <el-descriptions :title="item.channelName" border size="small"  direction="vertical">
-        <el-descriptions-item label="收视率">
-          <el-tag size="small"> {{ round(item.watchrate, 4) }}% </el-tag>
-        </el-descriptions-item>
-        <el-descriptions-item label="基础收视率">
-          <el-tag size="small">{{ round(item.baseWatchrate, 4) }}%</el-tag>
-        </el-descriptions-item>
-        <el-descriptions-item label="收视率增长率">
-          <el-tag size="small">{{ round(item.compareWatchrate, 4) }}%</el-tag>
-        </el-descriptions-item>
-        <el-descriptions-item label="市场份额">
-          <el-tag size="small" type="success">
-            {{ round(item.occrate, 4) }}%
-          </el-tag>
-        </el-descriptions-item>
-        <el-descriptions-item label="基础市场份额">
-          <el-tag size="small" type="success"
-            >{{ round(item.baseOccrate, 4) }}%</el-tag
-          >
-        </el-descriptions-item>
-        <el-descriptions-item label="市场份额增长率">
-          <el-tag size="small" type="success"
-            >{{ round(item.compareOccrate, 4) }}%</el-tag
-          >
-        </el-descriptions-item>
-      </el-descriptions>
-      <br />
-    </div>
+    <el-table
+      :data="list"
+      :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
+      style="width: 100%"
+    >
+      <el-table-column
+        align="center"
+        show-overflow-tooltip
+        prop="channelName"
+        label="频道名称"
+      />
+      <el-table-column
+        align="center"
+        :formatter="round"
+        prop="occrate"
+        label="市场份额(%)"
+      />
+      <el-table-column
+        prop="baseOccrate"
+        :formatter="round"
+        label="基础市场份额(%)"
+      />
+      <el-table-column
+        prop="compareOccrate"
+        :formatter="round"
+        label="市场份额增长率(%)"
+      />
+      <el-table-column
+        prop="prevYearOccrate"
+        :formatter="round"
+        label="上年同期市场份额(%)"
+      />
+      <el-table-column
+        prop="comparePrevYearOccrate"
+        :formatter="round"
+        label="市场份额同比(%)"
+      />
+    </el-table>
   </el-card>
 </template>
 
@@ -82,29 +91,29 @@ function pickerOptions(d) {
 }
 
 // 四舍五入
-const round = (value, precision) => {
-  let multiplier = Math.pow(10, precision || 0);
-  return Math.round(value * multiplier) / multiplier;
+const round = (row, column, cellValue) => {
+  let multiplier = Math.pow(10, 4);
+  return Math.round(cellValue * multiplier) / multiplier;
 };
 
 // 将json导出成csv文件
 const exportFile = () => {
   let data = list.value;
   let csvData = [];
-  csvData.push('频道名称,收视率(%),基础收视率(%),收视率增长率(%),市场份额(%),基础市场份额(%),市场份额增长率(%)\n');
+  csvData.push('频道名称,市场份额(%),基础市场份额(%),市场份额增长率(%)\n');
   data.forEach(item => {
     csvData.push(
-      `${item.channelName},${item.watchrate},${item.baseWatchrate},${item.compareWatchrate},${item.occrate},${item.baseOccrate},${item.compareOccrate}\n`
+      `${item.channelName},${item.occrate},${item.baseOccrate},${item.compareOccrate}\n`
     );
   });
-  let csvFile = new Blob(csvData,{ type: 'text/csv' });
+  let csvFile = new Blob(csvData, { type: 'text/csv' });
   let link = document.createElement('a');
   link.href = URL.createObjectURL(csvFile);
   link.download = `${date.value}.csv`;
   link.click();
   URL.revokeObjectURL(link.href);
   link.remove();
-}
+};
 
 const date = ref(getLastMonth());
 const list = ref([]);