feat(任务详情): 新增竞价和周报组件并完善详情页功能

- 添加竞价信息组件展示价格明细和油站策略
- 新增周报信息组件显示站点运营数据
- 扩展任务详情页处理信息展示和图片预览功能
- 优化页面布局和样式

apps/web-ele/src/views/schedule/detail/components/bidding.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+import { 
+  priceDetailColumns, 
+  priceDetailData, 
+  stationStrategyColumns, 
+  stationStrategyData 
+} from './config-data';
+
+// 价格明细表格配置
+const priceDetailGridOptions: VxeGridProps = {
+  columns: priceDetailColumns,
+  data: priceDetailData,
+  border: true,
+  showHeaderOverflow: true,
+  showOverflow: true,
+  size: 'medium',
+  height: 'auto',
+  // toolbarConfig: {
+  //   custom: true,
+  //   refresh: false,
+  //   zoom: false,
+  // },
+  proxyConfig: {
+    autoLoad: false,
+  },
+};
+
+// 油站策略表格配置
+const stationStrategyGridOptions: VxeGridProps = {
+  columns: stationStrategyColumns,
+  data: stationStrategyData,
+  border: true,
+  showHeaderOverflow: true,
+  showOverflow: true,
+  size: 'medium',
+  height: 'auto',
+  // toolbarConfig: {
+  //   custom: true,
+  //   refresh: false,
+  //   zoom: false,
+  // },
+  proxyConfig: {
+    autoLoad: false,
+  },
+};
+
+// 创建价格明细表格
+const [PriceDetailTable] = useVbenVxeGrid({
+  gridOptions: priceDetailGridOptions,
+});
+
+// 创建油站策略表格
+const [StationStrategyTable] = useVbenVxeGrid({
+  gridOptions: stationStrategyGridOptions,
+});
+</script>
+
+<template>
+  <div class="task-detail">
+    <!-- 页面标题和操作区 -->
+    <div class="task-header">
+      <div class="left">
+        <h3>我方油价：未来路加油站</h3>
+        <div class="price-survey-info">
+          <span class="survey-date">调查时间：2025-10-29</span>
+        </div>
+      </div>
+      <div class="right">
+        <el-button type="primary">打印</el-button>
+      </div>
+    </div>
+
+    <!-- 价格明细表格 -->
+    <div class="table-section">
+      <h4>价格明细：</h4>
+      <PriceDetailTable />
+    </div>
+
+    <!-- 油站策略表格 -->
+    <div class="table-section">
+      <h4>油站策略：</h4>
+      <StationStrategyTable />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.task-detail {
+  /* padding: 20px; */
+  /* background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
+}
+
+.task-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.task-header .left h3 {
+  margin: 0 0 10px 0;
+  font-size: 18px;
+  color: #333;
+}
+
+.price-survey-info {
+  display: flex;
+  gap: 20px;
+  font-size: 14px;
+  color: #666;
+}
+
+.task-header .right {
+  display: flex;
+  gap: 10px;
+}
+
+.table-section {
+  margin-bottom: 30px;
+}
+
+.table-section h4 {
+  margin: 0 0 15px 0;
+  font-size: 16px;
+  color: #333;
+  font-weight: 500;
+}
+
+:deep(.vxe-grid) {
+  margin-bottom: 0;
+}
+
+:deep(.vxe-table--border) {
+  border-color: #e8e8e8;
+}
+
+:deep(.vxe-header--column) {
+  background-color: #fafafa;
+  font-weight: 500;
+}
+
+:deep(.vxe-cell) {
+  padding: 8px 12px;
+}
+</style>

apps/web-ele/src/views/schedule/detail/components/config-data.tsx

@@ -0,0 +1,135 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+// 价格明细表格列配置
+export const priceDetailColumns: VxeGridProps['columns'] = [
+  { field: 'oilType', title: '油品', width: 100, align: 'center' },
+  { field: 'weilai0', title: '未来路加油站', width: 150, align: 'center' },
+  { field: 'dongming0', title: '东明石化海源加油站', width: 180, align: 'center' },
+  { field: 'zhongshihua0', title: '中石化东站路加油站', width: 180, align: 'center' },
+  { field: 'dashiqiao0', title: '大石桥石化麟瑞加油站', width: 180, align: 'center' },
+  { field: 'weilai1', title: '未来路加油站', width: 150, align: 'center' },
+  { field: 'dongming1', title: '东明石化海源加油站', width: 180, align: 'center' },
+  { field: 'zhongshihua1', title: '中石化东站路加油站', width: 180, align: 'center' },
+  { field: 'dashiqiao1', title: '大石桥石化麟瑞加油站', width: 180, align: 'center' },
+];
+
+// 价格明细表格数据
+export const priceDetailData = [
+  {
+    oilType: '95#',
+    weilai0: '7.31',
+    dongming0: '7.31',
+    zhongshihua0: '7.31',
+    dashiqiao0: '7.31',
+    weilai1: '7.31',
+    dongming1: '7.31',
+    zhongshihua1: '7.31',
+    dashiqiao1: '7.31',
+  },
+  {
+    oilType: '92#车',
+    weilai0: '6.85',
+    dongming0: '6.85',
+    zhongshihua0: '6.85',
+    dashiqiao0: '6.85',
+    weilai1: '6.85',
+    dongming1: '6.85',
+    zhongshihua1: '6.85',
+    dashiqiao1: '6.85',
+  },
+  {
+    oilType: '92#车',
+    weilai0: '6.85',
+    dongming0: '6.85',
+    zhongshihua0: '6.85',
+    dashiqiao0: '6.85',
+    weilai1: '6.85',
+    dongming1: '6.85',
+    zhongshihua1: '6.85',
+    dashiqiao1: '6.85',
+  },
+  {
+    oilType: '92#的士',
+    weilai0: '6.85',
+    dongming0: '6.85',
+    zhongshihua0: '6.85',
+    dashiqiao0: '6.85',
+    weilai1: '6.85',
+    dongming1: '6.85',
+    zhongshihua1: '6.85',
+    dashiqiao1: '6.85',
+  },
+  {
+    oilType: '92#运卡',
+    weilai0: '6.85',
+    dongming0: '6.85',
+    zhongshihua0: '6.85',
+    dashiqiao0: '6.85',
+    weilai1: '6.85',
+    dongming1: '6.85',
+    zhongshihua1: '6.85',
+    dashiqiao1: '6.85',
+  },
+  {
+    oilType: '合计',
+    weilai0: '',
+    dongming0: '',
+    zhongshihua0: '',
+    dashiqiao0: '',
+    weilai1: '',
+    dongming1: '',
+    zhongshihua1: '',
+    dashiqiao1: '',
+  },
+];
+
+// 油站策略表格列配置
+export const stationStrategyColumns: VxeGridProps['columns'] = [
+  { field: 'station', title: '油站', width: 100, align: 'center' },
+  { field: 'stationNature', title: '油站性质', width: 120, align: 'center' },
+  { field: 'competitiveRelation', title: '竞争关系', width: 120, align: 'center' },
+  { field: 'distance', title: '距离（KM）', width: 120, align: 'center' },
+  { field: 'discountPolicy', title: '优惠活动', width: 300, align: 'center' },
+  { field: 'valueAddedService', title: '增值服务', width: 250, align: 'center' },
+  { field: 'equipmentConfiguration', title: '油站设备配置变化', width: 250, align: 'center' },
+];
+
+// 油站策略表格数据
+export const stationStrategyData = [
+  {
+    station: '未来路...',
+    stationNature: '-',
+    competitiveRelation: '-',
+    distance: '-',
+    discountPolicy: '92#汽：会员满200优惠0.6元/升 优惠后单价6.46元/升；95#汽：会员满200优惠0.6元/升 优惠后单价6.94元/升 充值500送40元，折合优惠0.9元/升 充值1000送100元，折合优惠1.0元/升 充值2000送260元，折合优惠1.2元/升',
+    valueAddedService: '免费洗车、免费加注玻璃水、免费充气、手机充电、免费茶水、免费糖果、赠品、无线网络',
+    equipmentConfiguration: '冠德双屏机+ic卡加油机+自助收银机',
+  },
+  {
+    station: '东明石...',
+    stationNature: '民营',
+    competitiveRelation: '1级（主要）',
+    distance: '3.4',
+    discountPolicy: '非会员日优惠6毛，周二、周五优惠8毛；6日、16日、26日优惠8毛；平台优惠5毛',
+    valueAddedService: '抽纸、自助洗车',
+    equipmentConfiguration: '正常油站基本配置',
+  },
+  {
+    station: '中石化...',
+    stationNature: '民营',
+    competitiveRelation: '1级（主要）',
+    distance: '2.8',
+    discountPolicy: '非会员优惠6毛，周二、周四优惠8毛；平台优惠8毛',
+    valueAddedService: '抽纸、自助洗车、水、饮料、牙膏、洗洁精、抽纸、玻璃水、洗衣液、牙刷、人工清洗',
+    equipmentConfiguration: '基本加油设备',
+  },
+  {
+    station: '大石桥...',
+    stationNature: '民营',
+    competitiveRelation: '1级（主要）',
+    distance: '3.4',
+    discountPolicy: '油价直降7毛，平台优惠1毛，共计优惠8毛',
+    valueAddedService: '抽纸、自助洗车',
+    equipmentConfiguration: '油站基本配置',
+  },
+];

apps/web-ele/src/views/schedule/detail/components/weekly.vue

@@ -0,0 +1,140 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ElDescriptions, ElDescriptionsItem, ElTag } from 'element-plus';
+
+// 模拟周报数据
+const weeklyData = ref({
+  site: '未来路加油站',
+  priceAdjustment: '汽油价格调整（三五日提价0.6，其他时间同0.4）',
+  activity: '汽车销售部（三五日）员工洗车',
+  competitorSituation: '价格优惠0.8',
+  competitorChanges: '新增燃油系统',
+  completedWork: '站点周边的配套系统升级，反馈应用问题',
+  inventorySituation: '站点库存正常/需求调整',
+  nextPlan: '员工工作方向为国际站新规培训',
+  needCoordination: '系统数据同步功能完善，集成规则后链路数据规则问题',
+  safetyMatters: '安全无措施',
+  remark: '',
+  images: [],
+  handleTime: '2025-12-10 07:40:51',
+  deadline: '2025-12-14 23:00:00',
+  status: '规划完成',
+  executor: '要智站务',
+  organization: '系统'
+});
+
+// 状态标签配置
+const statusConfig: any = {
+  '规划完成': { type: 'success', text: '规划完成' },
+  '待处理': { type: 'info', text: '待处理' },
+  '处理中': { type: 'warning', text: '处理中' },
+  '已完成': { type: 'success', text: '已完成' },
+  '已关闭': { type: 'danger', text: '已关闭' }
+};
+</script>
+
+<template>
+  <div class="weekly-container">
+    <ElDescriptions class="weekly-info" :column="4">
+      <ElDescriptionsItem label="站点:" :span="4">
+        {{ weeklyData.site }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="本周价格调整:" :span="4">
+        {{ weeklyData.priceAdjustment }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="本站活动情况:" :span="4">
+        {{ weeklyData.activity }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="竞争对手情况:" :span="4">
+        {{ weeklyData.competitorSituation }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="竞争对手变化:" :span="4">
+        {{ weeklyData.competitorChanges }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="本周完成工作:" :span="4">
+        {{ weeklyData.completedWork }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="本周库存情况:" :span="4">
+        {{ weeklyData.inventorySituation }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="下周工作计划:" :span="4">
+        {{ weeklyData.nextPlan }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="需领导协调:" :span="4">
+        {{ weeklyData.needCoordination }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="安全、内控、合规、其他事项:" :span="4">
+        {{ weeklyData.safetyMatters }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="备注:" :span="4">
+        {{ weeklyData.remark || '-' }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="图片:" :span="4">
+        <div v-if="weeklyData.images && weeklyData.images.length > 0" class="weekly-images">
+          <img
+            v-for="(image, index) in weeklyData.images"
+            :key="index"
+            :src="image"
+            alt="周报图片"
+            class="weekly-image"
+          />
+        </div>
+        <span v-else>-</span>
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="处理时间:">
+        {{ weeklyData.handleTime }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="截止时间:">
+        {{ weeklyData.deadline }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="处理状态:">
+        <ElTag :type="statusConfig[weeklyData.status]?.type || 'info'">
+          {{ statusConfig[weeklyData.status]?.text || weeklyData.status }}
+        </ElTag>
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="执行人:">
+        {{ weeklyData.executor }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="组织:">
+        {{ weeklyData.organization }}
+      </ElDescriptionsItem>
+    </ElDescriptions>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.weekly-container {
+  width: 100%;
+  padding: 16px 0;
+}
+
+.weekly-info {
+  :deep(.el-descriptions__label) {
+    font-weight: 500;
+    color: var(--text-color-secondary);
+  }
+
+  :deep(.el-descriptions__content) {
+    color: var(--text-color-primary);
+  }
+}
+
+.weekly-images {
+  display: flex;
+  gap: 12px;
+  margin-top: 4px;
+
+  .weekly-image {
+    width: 60px;
+    height: 60px;
+    cursor: pointer;
+    object-fit: cover;
+    border-radius: 4px;
+    transition: transform 0.2s;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+}
+</style>

apps/web-ele/src/views/schedule/detail/index.vue

@@ -10,10 +10,12 @@ import {
   ElTag,
 } from 'element-plus';
 
+import BiddingComponent from './components/bidding.vue';
 import CheckComponent from './components/check.vue';
 // 引入检查项组件、评论组件和查阅组件
 import CommentComponent from './components/comment.vue';
 import ConsultComponent from './components/consult.vue';
+import WeeklyComponent from './components/weekly.vue';
 
 // 模拟任务数据
 const taskData = ref({
@@ -29,8 +31,39 @@ const taskData = ref({
   taskOwner: '',
   frequency: '每天一次',
   creator: '系统',
+  images: [
+    'https://picsum.photos/200/150?random=1',
+    'https://picsum.photos/200/150?random=2',
+  ],
+  // 处理信息
+  handleInfo: {
+    handleStatus: '已完成',
+    handleSituation: '已完成摄像头抓图AI检查，检查结果正常，无异常情况。',
+    handleImages: [
+      'https://picsum.photos/200/150?random=3',
+      'https://picsum.photos/200/150?random=4',
+      'https://picsum.photos/200/150?random=5',
+    ],
+    handleTime: '2025-12-09 14:30:00',
+    handler: '张三',
+  },
 });
 
+// 图片预览相关
+const previewVisible = ref(false);
+const previewImages = ref<string[]>([]);
+
+// 预览图片
+const previewImage = (imageUrl: string) => {
+  previewImages.value = [imageUrl];
+  previewVisible.value = true;
+};
+
+// 关闭图片预览
+const closePreview = () => {
+  previewVisible.value = false;
+};
+
 // 状态标签配置
 const statusConfig: any = {
   待处理: { type: 'info', text: '待处理' },
@@ -105,6 +138,22 @@ const handleTransferTask = () => {
         <ElDescriptionsItem label="标准指引:" :span="4">
           {{ taskData.standardGuide || '-' }}
         </ElDescriptionsItem>
+        <ElDescriptionsItem label="任务图片:" :span="4">
+          <div
+            v-if="taskData.images && taskData.images.length > 0"
+            class="task-images"
+          >
+            <img
+              v-for="(image, index) in taskData.images"
+              :key="index"
+              :src="image"
+              alt="任务图片"
+              class="task-image"
+              @click="previewImage(image)"
+            />
+          </div>
+          <span v-else>-</span>
+        </ElDescriptionsItem>
         <ElDescriptionsItem label="执行人:">
           {{ taskData.executor }}
         </ElDescriptionsItem>
@@ -134,6 +183,77 @@ const handleTransferTask = () => {
       </ElDescriptions>
     </ElCard>
 
+    <!--竞价-->
+    <ElCard>
+      <template #header>
+        <div class="flex items-center justify-between">
+          <span class="text-lg font-bold text-gray-800">竞价信息</span>
+        </div>
+      </template>
+      <BiddingComponent />
+    </ElCard>
+
+    <!-- 周报信息 -->
+    <ElCard class="mt-4">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <span class="text-lg font-bold text-gray-800">周报信息</span>
+        </div>
+      </template>
+      <WeeklyComponent />
+    </ElCard>
+
+    <!-- 处理信息组件 -->
+    <ElCard class="mt-4">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <span class="text-lg font-bold text-gray-800">处理信息</span>
+        </div>
+      </template>
+      <ElDescriptions class="task-info" :column="4">
+        <ElDescriptionsItem label="处理状态:" :span="4">
+          <ElTag
+            :type="
+              statusConfig[taskData.handleInfo.handleStatus]?.type || 'info'
+            "
+          >
+            {{
+              statusConfig[taskData.handleInfo.handleStatus]?.text ||
+              taskData.handleInfo.handleStatus
+            }}
+          </ElTag>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="处理情况:" :span="4">
+          {{ taskData.handleInfo.handleSituation || '-' }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="处理图片:" :span="4">
+          <div
+            v-if="
+              taskData.handleInfo.handleImages &&
+              taskData.handleInfo.handleImages.length > 0
+            "
+            class="task-images"
+          >
+            <img
+              v-for="(image, index) in taskData.handleInfo.handleImages"
+              :key="index"
+              :src="image"
+              alt="处理图片"
+              class="task-image"
+              @click="previewImage(image)"
+            />
+          </div>
+          <span v-else>-</span>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="处理人:">
+          {{ taskData.handleInfo.handler || '-' }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="处理时间:">
+          {{ taskData.handleInfo.handleTime || '-' }}
+        </ElDescriptionsItem>
+      </ElDescriptions>
+    </ElCard>
+
     <!-- 检查项组件 -->
     <ElCard class="mt-4">
       <template #header>
@@ -164,6 +284,13 @@ const handleTransferTask = () => {
       <CommentComponent />
     </ElCard>
   </Page>
+
+  <!-- 图片预览组件 -->
+  <ElImageViewer
+    v-if="previewVisible"
+    :url-list="previewImages"
+    @close="closePreview"
+  />
 </template>
 
 <style scoped lang="scss">
@@ -198,4 +325,23 @@ const handleTransferTask = () => {
   //   padding: 8px 0;
   // }
 }
+
+.task-images {
+  display: flex;
+  gap: 12px;
+  margin-top: 4px;
+
+  .task-image {
+    width: 60px;
+    height: 60px;
+    cursor: pointer;
+    object-fit: cover;
+    border-radius: 4px;
+    transition: transform 0.2s;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+}
 </style>