Merge branch 'cc-dev' into 'dev'

修改样式问题

See merge request product-group-fe/sfy-safety-group/sfy-safety!93

src/views/disaster/disaster-control/src/components/DisasterInfo.vue

@@ -10,17 +10,40 @@
           <el-col :span="8">
             <div class="disaster-information__content--item">
               <span class="label">受灾物品：</span>
-              <span class="value">{{ LossReportItemFormData?.affectedItems }}</span>
+              <el-tooltip
+                :content="LossReportItemFormData?.affectedItems"
+                placement="top-start"
+                effect="light"
+                :popper-class="[
+                  'custom-tooltip',
+                  LossReportItemFormData?.affectedItems.length > 20 ? '' : 'custom-tooltip--opacity0',
+                ]"
+              >
+                <span class="value">{{ LossReportItemFormData?.affectedItems }}</span>
+              </el-tooltip>
             </div>
           </el-col>
           <el-col :span="8">
             <div class="disaster-information__content--item">
               <span class="label">地点：</span>
-              <span class="value">
-                {{ LossReportItemFormData?.buildingNo }}
-                {{ LossReportItemFormData?.floorNo }}
-                {{ LossReportItemFormData?.roomNo }}
-              </span>
+              <el-tooltip
+                :content="`${LossReportItemFormData?.buildingNo} ${LossReportItemFormData?.floorNo} ${LossReportItemFormData?.roomNo}`"
+                placement="top-start"
+                effect="light"
+                :popper-class="[
+                  'custom-tooltip',
+                  `${LossReportItemFormData?.buildingNo} ${LossReportItemFormData?.floorNo} ${LossReportItemFormData?.roomNo}`
+                    .length > 20
+                    ? ''
+                    : 'custom-tooltip--opacity0',
+                ]"
+              >
+                <span class="value">
+                  {{ LossReportItemFormData?.buildingNo }}
+                  {{ LossReportItemFormData?.floorNo }}
+                  {{ LossReportItemFormData?.roomNo }}
+                </span>
+              </el-tooltip>
             </div>
           </el-col>
           <el-col :span="8">
@@ -48,13 +71,37 @@
           <el-col :span="8">
             <div class="disaster-information__content--item" v-if="LossReportItemFormData?.estimatedLoss">
               <span class="label">损失金额评估：</span>
-              <span class="value">{{ LossReportItemFormData?.estimatedLoss }}元</span>
+              <el-tooltip
+                :content="LossReportItemFormData?.estimatedLoss"
+                placement="top-start"
+                effect="light"
+                :popper-class="[
+                  'custom-tooltip',
+                  LossReportItemFormData?.estimatedLoss.length > 20 ? '' : 'custom-tooltip--opacity0',
+                ]"
+              >
+                <span class="value">
+                  {{ LossReportItemFormData?.estimatedLoss }}
+                  <span v-if="LossReportItemFormData?.estimatedLoss.length < 20">元</span>
+                </span>
+              </el-tooltip>
+              <span style="color: rgba(0, 0, 0, 0.65)" v-if="LossReportItemFormData?.estimatedLoss.length > 20">元</span>
             </div>
           </el-col>
         </el-row>
         <div class="disaster-information__content--item">
           <span class="label">损失描述：</span>
-          <span class="value">{{ LossReportItemFormData?.description }}</span>
+          <el-tooltip
+            :content="LossReportItemFormData?.description"
+            placement="top-start"
+            effect="light"
+            :popper-class="[
+              'custom-tooltip',
+              LossReportItemFormData?.description.length > 50 ? '' : 'custom-tooltip--opacity0',
+            ]"
+          >
+            <span class="value">{{ LossReportItemFormData?.description }}</span>
+          </el-tooltip>
         </div>
         <div
           class="disaster-information__content--item"
@@ -78,7 +125,17 @@
         </div>
         <div class="disaster-information__content--item" v-if="LossReportItemFormData?.remark">
           <span class="label">备注：</span>
-          <span class="value">{{ LossReportItemFormData?.remark }}</span>
+          <el-tooltip
+            :content="LossReportItemFormData?.remark"
+            placement="top-start"
+            effect="light"
+            :popper-class="[
+              'custom-tooltip',
+              LossReportItemFormData?.remark.length > 50 ? '' : 'custom-tooltip--opacity0',
+            ]"
+          >
+            <span class="value">{{ LossReportItemFormData?.remark }}</span>
+          </el-tooltip>
         </div>
       </section>
     </div>

src/views/disaster/disaster-control/src/components/LossRecord.vue

@@ -78,6 +78,7 @@
                       placement="top-start"
                       effect="light"
                       v-if="scope.row.isLoss"
+                      :popper-class="isToolTip(scope.row.affectedItems) ? '' : 'custom-tooltip--opacity0'"
                     >
                       <div class="affected-items-container">
                         <span>{{ scope.row.affectedItems }}</span>
@@ -168,7 +169,7 @@
   import useTableConfig from '@/hooks/useTableConfigHook';
   import { useDisasterControlHook } from '../hook';
   import { useDeptInfoHook } from '@/views/disaster/hooks';
-  import { getfixStatus } from '../util';
+  import { getfixStatus, isToolTip } from '../util';
   import type { DisposalManagementCollapseListResponse, LossRecordTableResponse } from '@/types/disaster-control';
   import { getReportTaskList, getLossRecordTableData, deleteLossRecord } from '@/api/disaster-control';
   import {

src/views/disaster/disaster-control/src/components/Rectification.vue

@@ -21,6 +21,30 @@
         </p>
       </div>
       <BasicTable :tableData="rectificationList" :tableConfig="tableConfig">
+        <template #fixMethod="scope">
+          <div class="long-text-container">
+            <el-tooltip
+              :content="scope.row.fixMethod"
+              placement="top-start"
+              effect="light"
+              :popper-class="['custom-tooltip', isToolTip(scope.row.fixMethod) ? '' : 'custom-tooltip--opacity0']"
+            >
+              <span>{{ scope.row.fixMethod }}</span>
+            </el-tooltip>
+          </div>
+        </template>
+        <template #remark="scope">
+          <div class="long-text-container">
+            <el-tooltip
+              :content="scope.row.remark"
+              placement="top-start"
+              effect="light"
+              :popper-class="['custom-tooltip', isToolTip(scope.row.fixMethod) ? '' : 'custom-tooltip--opacity0']"
+            >
+              <span>{{ scope.row.remark }}</span>
+            </el-tooltip>
+          </div>
+        </template>
         <template #fixImages="scope">
           <div class="image-container" v-if="JSON.parse(scope.row.fixImages).length">
             <el-image
@@ -80,6 +104,7 @@
   import useTableConfig from '@/hooks/useTableConfigHook';
   import { useDisasterControlHook } from '../hook';
   import { downloadFile } from '@/views/disaster/utils';
+  import { isToolTip } from '../util';
   import type { DisposalRectificationFormData } from '@/types/disaster-control';
   import type { PersonGroupItem } from '@/types/person-group/type';
   import { RECTIFICATION_INFO_TABLE_COLUMNS, RECTIFICATION_INFO_TABLE_OPTIONS } from '../config';
@@ -204,4 +229,10 @@
     color: $primary-color;
     line-height: 20px;
   }
+  .long-text-container {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 </style>

src/views/disaster/disaster-control/src/components/ReportTask.vue

@@ -19,7 +19,7 @@
       </template>
       <template #action="scope">
         <!-- 待上报任务阶段 -->
-        <div class="action-container" v-if="scope.row.taskStage === TASK_STAGE.TO_BE_REPORTED">
+        <div class="action-container" v-if="scope.row.taskStage !== TASK_STAGE.OVERDUE">
           <ActionButton
             text="去上报"
             v-if="isOverdue(scope.row.dueCompleteTime)"
@@ -31,16 +31,7 @@
             @click="handleAddReporter(scope.row.id, scope.row.reporterList)"
           />
         </div>
-        <!-- 已上报任务阶段 -->
-        <div
-          class="action-container"
-          v-else-if="
-            scope.row.taskStage === TASK_STAGE.REPORTED_LOSS || scope.row.taskStage === TASK_STAGE.REPORTED_NO_LOSS
-          "
-        >
-          <ActionButton text="查看记录" @click="handleView(scope.row.handleTaskId, scope.row.taskName, 'task')" />
-        </div>
-        <div class="action-container" v-else-if="scope.row.taskStage === TASK_STAGE.OVERDUE">
+        <div class="action-container" v-else>
           <span>--</span>
         </div>
       </template>

src/views/disaster/disaster-control/src/config/table.ts

@@ -105,7 +105,7 @@ export const LOSS_RECORD_TABLE_COLUMNS: TableColumnProps[] = [
     label: '受灾物品',
     prop: 'affectedItems',
     slot: 'affectedItems',
-    minWidth: '200px',
+    width: '200px',
   },
   {
     label: '上报时间',
@@ -144,7 +144,8 @@ export const RECTIFICATION_INFO_TABLE_COLUMNS: TableColumnProps[] = [
   {
     label: '整改措施',
     prop: 'fixMethod',
-    minWidth: '120px',
+    slot: 'fixMethod',
+    width: '200px',
   },
   {
     label: '整改图片',
@@ -177,7 +178,8 @@ export const RECTIFICATION_INFO_TABLE_COLUMNS: TableColumnProps[] = [
   {
     label: '备注',
     prop: 'remark',
-    minWidth: '200px',
+    slot: 'remark',
+    width: '200px',
   },
   {
     label: '整改材料',

src/views/disaster/disaster-control/src/style/view-item.scss

@@ -19,6 +19,9 @@
     .value {
       flex: 1;
       color: rgba(0, 0, 0, 0.65);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
     .image-container {
       display: flex;

src/views/disaster/disaster-control/src/util.ts

@@ -21,4 +21,13 @@ const exportLossRecord = async (data: DisasterLossDetailQuery, name: string) =>
   downloadFile(url, `${name}损失明细.xlsx`);
 };
 
-export { getTaskStage, getfixStatus, exportLossRecord };
+const isToolTip = (name: string) => {
+  // 计算实际长度，中文算2个字符，英文和符号算1个字符
+  const realLength = name.split('').reduce((acc, char) => {
+    const charCode = char.charCodeAt(0);
+    // 中文范围：0x4E00-0x9FA5
+    return acc + (charCode >= 0x4e00 && charCode <= 0x9fa5 ? 2 : 1);
+  }, 0);
+  return realLength > 20;
+};
+export { getTaskStage, getfixStatus, exportLossRecord, isToolTip };