✨ feat<报表管理>: 优化功能

表格状态改为开关；图表改成两个柱形图

src/views/reportManage/TaskManage/api.ts

@@ -42,6 +42,15 @@ export function postUpdateTask(body) {
   });
 }
 
+export function postUpdateTaskStatus(query, body) {
+  return request({
+    url: `/api/report_manage/summary-tasks/${body.id}/`,
+    method: 'POST',
+    data: body,
+    params: query,
+  });
+}
+
 export function getOperationSelect(query) {
   return request({
     url: '/api/system/user-select/',

src/views/reportManage/TaskManage/index.vue

@@ -8,7 +8,7 @@ import {
   getOperationSelect,
   postUpdateTask,
   postDeleteTask,
-  getCurrencyCodeSelect, exportTaskData
+  getCurrencyCodeSelect, exportTaskData, postUpdateTaskStatus
 } from '/src/views/reportManage/TaskManage/api.ts';
 import { ComponentSize, ElMessage, FormInstance, FormRules } from 'element-plus';
 import { Plus, Delete } from '@element-plus/icons-vue';
@@ -130,6 +130,7 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
       title: '平台编号',
       editRender: {autofocus: '.vxe-input--inner'},
       slots: {edit: 'number_edit'},
+      minWidth:97
     },
     {
       field: 'platformName',
@@ -137,32 +138,32 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
       editRender: {autofocus: '.vxe-input--inner'},
       slots: {edit: 'name_edit'},
       align: 'center',
-      width: 150
+      minWidth: 150
     },
     {
       field: 'country',
       title: '国家',
       editRender: {autofocus: '.vxe-input--inner'},
       slots: {edit: 'country_edit'},
-      width: 89,
+      minWidth: 89,
       align: 'center'
     },
-    {field: 'brandName', title: '品牌', editRender: {}, slots: {edit: 'brand_edit'}, align: 'center'},
-    {field: 'user_name', title: '运营', editRender: {}, slots: {edit: 'operation_edit'}, align: 'center'},
-    {field: 'currencyCode', title: '回款币种', editRender: {}, slots: {edit: 'currency_edit'}, align: 'center'},
+    {field: 'brandName', title: '品牌', editRender: {}, slots: {edit: 'brand_edit'}, align: 'center',minWidth: 89,},
+    {field: 'user_name', title: '运营', editRender: {}, slots: {edit: 'operation_edit'}, align: 'center',minWidth: 89},
+    {field: 'currencyCode', title: '回款币种', editRender: {}, slots: {edit: 'currency_edit'}, align: 'center',minWidth: 89},
     {
       field: 'currencyCodePlatform',
       title: '回款/余额币种',
       editRender: {},
       slots: {edit: 'currencyCodePlatform_edit'},
-      width: 130,
+      minWidth: 130,
       align: 'center'
     },
-    {field: 'line', title: '线路', editRender: {}, slots: {edit: 'line_edit'}, align: 'center'},
-    {field: 'ipaddress', title: 'IP地址', editRender: {}, slots: {edit: 'ipaddress_edit'}, width: 138},
-    {field: 'company', title: '注册公司', editRender: {}, slots: {edit: 'company_edit'}, align: 'center'},
-    {field: 'platform', title: '平台', editRender: {}, slots: {edit: 'platform_edit'}, align: 'center'},
-    {field: 'status', title: '状态', editRender: {}, slots: {edit: 'status_edit'}, align: 'center'},
+    {field: 'line', title: '线路', editRender: {}, slots: {edit: 'line_edit'}, align: 'center',minWidth: 89},
+    {field: 'ipaddress', title: 'IP地址', editRender: {}, slots: {edit: 'ipaddress_edit'}, minWidth: 138},
+    {field: 'company', title: '注册公司', editRender: {}, slots: {edit: 'company_edit'}, align: 'center',minWidth: 89},
+    {field: 'platform', title: '平台', editRender: {}, slots: {edit: 'platform_edit'}, align: 'center',minWidth: 89},
+    {field: 'status', title: '状态',  slots: {default: 'status_default'}, align: 'center',minWidth: 89},
     {title: '操作', width: 120, slots: {default: 'operate'}},
   ],
   data: [],
@@ -180,18 +181,18 @@ const gridEvents: VxeGridListeners<RowVO> = {
   },
 };
 
-async function fetchAllTasks(page = 1, limit = 100) {
-  try {
-    const response = await getTasks({page, limit});
-    allTasks = allTasks.concat(response.data);
-
-    if (response.data.length === limit) {
-      await fetchAllTasks(page + 1, limit);
-    }
-  } catch (error) {
-    console.error('Error fetching all tasks:', error);
-  }
-}
+//async function fetchAllTasks(page = 1, limit = 100) {
+//  try {
+//    const response = await getTasks({page, limit});
+//    allTasks = allTasks.concat(response.data);
+//
+//    if (response.data.length === limit) {
+//      await fetchAllTasks(page + 1, limit);
+//    }
+//  } catch (error) {
+//    console.error('Error fetching all tasks:', error);
+//  }
+//}
 
 async function getTaskList(filters = {}) {
   try {
@@ -204,8 +205,8 @@ async function getTaskList(filters = {}) {
     gridOptions.data = response.data;
     gridOptions.pagerConfig.total = response.total;
 
-    allTasks = []; // 重置 allTasks
-    await fetchAllTasks(); // 获取所有任务数据
+    //allTasks = []; // 重置 allTasks
+    //await fetchAllTasks(); // 获取所有任务数据
   } catch (error) {
     console.error('Error fetching task data:', error);
   } finally {
@@ -317,7 +318,6 @@ const requiredFields = [
   {field: 'ipaddress', title: 'IP地址'},
   {field: 'company', title: '注册公司'},
   {field: 'platform', title: '平台'},
-  {field: 'status', title: '状态'},
 ];
 
 const validateRow = (row) => {
@@ -354,7 +354,6 @@ async function updateRow(row) {
       ipaddress: row.ipaddress,
       company: row.company,
       platform: row.platform,
-      status: row.status,
     };
     //console.log('updatedRowData', updatedRowData);
     try {
@@ -372,6 +371,30 @@ async function updateRow(row) {
   }
 }
 
+async function handleStatusChange(row) {
+  const $grid = xGrid.value;
+  if ($grid) {
+    const updatedData = {
+      id: row.id,
+      status: row.status,
+    };
+    const query ={partial:1,}
+    console.log('updatedData', updatedData);
+    try {
+      const response = await postUpdateTaskStatus(query,updatedData);
+      if (response.code === 2000) {
+        ElMessage.success('更新成功');
+      } else if (response.code == 400) {
+        ElMessage.warning(`${response.data.description}`);
+      } else {
+        ElMessage.error('更新失败');
+      }
+    }catch (error){
+      console.log('error:', error);
+    }
+  }
+}
+
 const saveRowEvent = async (row: RowVO) => {
   const $grid = xGrid.value;
   if ($grid) {
@@ -574,8 +597,16 @@ onMounted(() => {
         <template #platform_edit="{ row }">
           <vxe-input v-model="row.platform"></vxe-input>
         </template>
-        <template #status_edit="{ row }">
-          <vxe-input v-model="row.status"></vxe-input>
+        <template #status_default="{ row }">
+          <el-switch
+              v-model="row.status"
+              :active-value="1"
+              :inactive-value="0"
+              inline-prompt
+              active-text="是"
+              inactive-text="否"
+              @change="handleStatusChange(row)"
+          />
         </template>
         <template #operation_edit="{ row }">
           <vxe-select v-model="row.user" multiple>

src/views/reportManage/dataCenter/normalDisplay/components/DateTendency/index.vue

@@ -68,7 +68,7 @@ const option: any = {
       },
       axisLine: {
         show: true,
-        lineStyle: {color: ''},
+        lineStyle: { color: '' },
       },
       show: true,
     },
@@ -159,7 +159,7 @@ const option: any = {
 };
 const loading = ref(true);
 const queryParams = computed(() => parseQueryParams(props.query));
-provide('statDim', statDim)
+provide('statDim', statDim);
 
 onMounted(() => {
   getMetricsItems();
@@ -185,18 +185,21 @@ async function initLine() {
   option.series = metrics.value.map((metric, index) => ({
     id: index,
     name: metric.label,
-    type: index === 0 ? 'bar' : 'line',
-    encode: {x: 'data_datetime', y: metric.metric},
+    type: metric.color == '#3fd4cf' ? 'line' : 'bar',
+    encode: { x: 'data_datetime', y: metric.metric },
     yAxisIndex: index,
-    itemStyle: {color: option.series.type == 'bar' ? '#0085ff' : metric.color, borderRadius: [6, 6, 6, 6]},
-    lineStyle: {color: metric.color},
+    itemStyle: {
+      color: index > 1 ? '#3fd4cf' : (index === 0 ? '#0085ff' : '#ff9500'),
+      borderRadius: [6, 6, 6, 6]
+    },
+    lineStyle: { color: metric.color },
     barWidth: '16px',
     areaStyle:
         index !== 0
             ? {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {offset: 0, color: metric.color + '53'},
-                {offset: 1, color: metric.color + '03'},
+                { offset: 0, color: metric.color + '53' },
+                { offset: 1, color: metric.color + '03' },
               ]),
             }
             : undefined,
@@ -208,10 +211,8 @@ async function initLine() {
     type: 'value',
     position: index === 0 ? 'left' : 'right',
     offset: index > 1 ? (index - 1) * 80 : 0,
-    axisLine: {show: true, lineStyle: {color: metric.color}},
-    splitLine: {
-      show: index === 0,
-    },
+    axisLine: { show: true, lineStyle: { color: metric.color } },
+    splitLine: { show: index === 0, },
     show: true,
   }));
 
@@ -254,13 +255,13 @@ const getMetricsItems = async () => {
   const data = resp.data;
   metricsItems.value.length = 0;
   XEUtils.arrayEach(props.metricEnum, (info) => {
-     //console.log('info', info);
+    //console.log('info', info);
     const tmp: MetricData = {
       label: info.label,
       value: info.value,
       metricVal: data[info.value],
-      gapVal: data[`gap${info.value}`],
-      preVal: data[`prev${info.value}`],
+      gapVal: data[`gap${ info.value }`],
+      preVal: data[`prev${ info.value }`],
     };
     // console.log('122', tmp);
     metricsItems.value.push(tmp);
@@ -279,19 +280,19 @@ function changeMetric() {
     const baseConfig: any = {
       id: index,
       name: metric.label,
-      type: metric.color === '#0085ff' ? 'bar' : 'line',
-      encode: {x: 'data_datetime', y: metric.metric},
+      type: metric.color == '#3fd4cf' ? 'line' : 'bar',
+      encode: { x: 'data_datetime', y: metric.metric },
       yAxisIndex: index,
-      itemStyle: {color: metric.color, borderRadius: [6, 6, 6, 6]},
-      lineStyle: {color: metric.color},
+      itemStyle: { color: metric.color, borderRadius: [6, 6, 6, 6] },
+      lineStyle: { color: metric.color },
       barWidth: '16px',
     };
 
     if (baseConfig.type != 'bar') {
       baseConfig.areaStyle = {
         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          {offset: 0, color: metric.color + '53'},
-          {offset: 1, color: metric.color + '03'},
+          { offset: 0, color: metric.color + '53' },
+          { offset: 1, color: metric.color + '03' },
         ]),
       };
     }
@@ -308,11 +309,9 @@ function changeMetric() {
     offset: index > 1 ? (index - 1) * 80 : 0,
     axisLine: {
       show: true,
-      lineStyle: {color: metric.color},
-    },
-    splitLine: {
-      show: index === 0,
+      lineStyle: { color: metric.color },
     },
+    splitLine: { show: index === 0 },
     show: true,
   }));
 
@@ -323,10 +322,9 @@ function changeMetric() {
   chartObj.setOption(option, true); // 使用 true 作为第二个参数，强制完全刷新
 }
 
-const changeStatDim = async () => {
+async function changeStatDim() {
   emitter.emit('DateTendency-dateChange', statDim.value);
-
-};
+}
 
 let initialized = false;
 watch(props.query, async () => {
@@ -336,7 +334,7 @@ watch(props.query, async () => {
   }
   loading.value = true;
   await getMetricsItems();
-  await initLine()
+  await initLine();
   loading.value = false;
 });
 
@@ -350,22 +348,22 @@ watch(
     { immediate: true }
 );
 
-const resizeChart = () => {
+function resizeChart() {
   chartObj.resize();
-};
+}
 
-const addResize = () => {
+function addResize() {
   window.addEventListener('resize', resizeChart);
-};
+}
 
-const removeResize = () => {
+function removeResize() {
   window.removeEventListener('resize', resizeChart);
-};
+}
 </script>
 
 <template>
   <div v-loading="loading">
-    <MetricsCards v-model="metrics" :metric-items="metricsItems" @change="changeMetric" ></MetricsCards>
+    <MetricsCards v-model="metrics" :metric-items="metricsItems" @change="changeMetric"></MetricsCards>
     <el-radio-group v-model="statDim" class="chart-button-group" @change="changeStatDim">
       <el-radio-button label="day">日</el-radio-button>
       <el-radio-button :disabled="!props.fetchLineWeek" label="week">周</el-radio-button>

src/views/reportManage/dataCenter/normalDisplay/components/TableDataDisplay.vue

@@ -213,12 +213,13 @@ watch(() => props.taskIds, (newTaskIds) => {
 });
 
 const handleImport = () => {
-  router.push({
+  const url = router.resolve({
     name: 'TableDataEntry',
     query: {
       dateType: dateType.value,
     }
-  });
+  }).href;
+  window.open(url, '_blank');
 };
 
 function formatEmptyCell({cellValue}) {
@@ -255,7 +256,7 @@ const headerCellStyle = () => {
     <vxe-grid :cell-style="cellStyle" :header-cell-style="headerCellStyle" stripe v-bind="currentGridOptions"
               v-on="gridEvents" @sort-change="handleSortChange">
       <template #toolbar_buttons>
-        <vxe-button icon="vxe-icon-add" status="primary" @click="handleImport">数据录入</vxe-button>
+        <el-button icon="plus" type="primary" @click="handleImport" target="_blank">数据录入</el-button>
       </template>
       <template #platformNumber_default="{ row }">
         <div class="font-semibold">{{ row.platformNumber }}</div>
@@ -280,4 +281,14 @@ const headerCellStyle = () => {
   padding-left: 5px !important;
   padding-right: 0 !important;
 }
+
+.custom-btn {
+  border: 1px solid #0085ff; padding: 8px
+}
+
+.custom-btn:hover {
+  background-color: #0085ff;
+  color: #a6d8fc;
+  border: 1px solid #0085ff;
+}
 </style>