Browse Source

修改文字

chenbaoxin 4 months ago
parent
commit
3c82faa804
2 changed files with 267 additions and 169 deletions
  1. 250 159
      src/views/HealthStatusAnalysis/index.vue
  2. 17 10
      src/views/WarningSettings/index.vue

+ 250 - 159
src/views/HealthStatusAnalysis/index.vue

@@ -9,7 +9,7 @@
 <template>
   <div class="all-page">
     <div class="left">
-            <!-- {{machineImgParamsRef}} -->
+      <!-- {{machineImgParamsRef}} -->
       <div class="left-top">
         <s-title titleText="系统数据监测"></s-title>
         <div class="machine-all">
@@ -22,7 +22,9 @@
           <!-- 添加注释和标签 -->
           <div class="annotation" style="top: 25%; left: 10%">左DE活塞</div>
           <div class="annotation" style="top: 24%; left: 24%">左DE燃油齿条</div>
-          <div class="annotation" style="top: 15.5%; left: 35.5%">左DE冷却水</div>
+          <div class="annotation" style="top: 15.5%; left: 35.5%">
+            左DE冷却水
+          </div>
           <div class="annotation" style="top: 24%; left: 38%">左DE箱装体</div>
           <div class="annotation" style="top: 19%; left: 44%">左DE燃油齿条</div>
           <div class="annotation" style="top: 14%; left: 54.5%">右齿轮箱</div>
@@ -41,20 +43,32 @@
           <div class="annotation" style="bottom: 12%; left: 25%">
             右DE箱装体冷却风机
           </div>
-          <div class="annotation" style="bottom: 14%; left: 42.5%">右DE滑油</div>
+          <div class="annotation" style="bottom: 14%; left: 42.5%">
+            右DE滑油
+          </div>
           <!-- 带有小边框的注释 -->
           <div class="annotation bordered-box" style="top: 12%; left: 0.5%">
             <div>
               <div>压力A排</div>
-        
+
               <div class="value">
-                {{formatPressure( machineImgParamsRef?.left_de_cooling_water_pressure_a)  }} Mpa
+                {{
+                  formatPressure(
+                    machineImgParamsRef?.left_de_cooling_water_pressure_a
+                  )
+                }}
+                Mpa
               </div>
             </div>
             <div>
               <div>压力B排</div>
               <div class="value">
-                {{ formatPressure(machineImgParamsRef?.left_de_cooling_water_pressure_b ) }} Mpa
+                {{
+                  formatPressure(
+                    machineImgParamsRef?.left_de_cooling_water_pressure_b
+                  )
+                }}
+                Mpa
               </div>
             </div>
           </div>
@@ -62,22 +76,37 @@
             <div>
               <div>海水压力</div>
               <div class="value">
-                {{formatPressure( machineImgParamsRef?.right_gearbox_seawater_pressure ) }} Mpa
+                {{
+                  formatPressure(
+                    machineImgParamsRef?.right_gearbox_seawater_pressure
+                  )
+                }}
+                Mpa
               </div>
             </div>
             <div>
               <div>海水温度</div>
               <div class="value">
-                {{ formatPressure(machineImgParamsRef?.right_gearbox_seawater_temp)  }} °C
+                {{
+                  formatPressure(
+                    machineImgParamsRef?.right_gearbox_seawater_temp
+                  )
+                }}
+                °C
               </div>
             </div>
           </div>
-          <div class="annotation bordered-box" style="bottom: 13.5%; left: -4.2%">
+          <div
+            class="annotation bordered-box"
+            style="bottom: 13.5%; left: -4.2%"
+          >
             <div>
               <div>后气压PP030</div>
               <div class="value">
                 {{
-                  formatPressure(machineImgParamsRef?.right_gt_high_pressure_compressor_air_pressure_pp030) 
+                  formatPressure(
+                    machineImgParamsRef?.right_gt_high_pressure_compressor_air_pressure_pp030
+                  )
                 }}
                 Mpa
               </div>
@@ -86,7 +115,9 @@
               <div>后气压PP040</div>
               <div class="value">
                 {{
-                 formatPressure( machineImgParamsRef?.right_gt_high_pressure_compressor_air_pressure_pp040) 
+                  formatPressure(
+                    machineImgParamsRef?.right_gt_high_pressure_compressor_air_pressure_pp040
+                  )
                 }}
                 Mpa
               </div>
@@ -97,13 +128,19 @@
             <div>
               <div>压力(1)</div>
               <div class="value">
-                {{ formatPressure(machineImgParamsRef?.right_de_oil_pressure_1)  }} Mpa
+                {{
+                  formatPressure(machineImgParamsRef?.right_de_oil_pressure_1)
+                }}
+                Mpa
               </div>
             </div>
             <div>
               <div>压力(2)</div>
               <div class="value">
-                {{ formatPressure(machineImgParamsRef?.right_de_oil_pressure_2)  }} Mpa
+                {{
+                  formatPressure(machineImgParamsRef?.right_de_oil_pressure_2)
+                }}
+                Mpa
               </div>
             </div>
           </div>
@@ -111,13 +148,23 @@
             <div>
               <div>压力A排</div>
               <div class="value">
-                {{ formatPressure(machineImgParamsRef?.right_de_boost_air_pressure_a)  }} Mpa
+                {{
+                  formatPressure(
+                    machineImgParamsRef?.right_de_boost_air_pressure_a
+                  )
+                }}
+                Mpa
               </div>
             </div>
             <div>
               <div>压力B排</div>
               <div class="value">
-                {{ formatPressure(machineImgParamsRef?.right_de_boost_air_pressure_b)  }} Mpa
+                {{
+                  formatPressure(
+                    machineImgParamsRef?.right_de_boost_air_pressure_b
+                  )
+                }}
+                Mpa
               </div>
             </div>
           </div>
@@ -140,11 +187,11 @@
     <div class="right">
       <div class="right-top">
         <s-title :type="2" titleText="运行工况分析"></s-title>
-        <div class="run-status fullClass" >
-         <div class="run-status-body">
-           <div class="status-text">运行状态</div>
-          <img src="@/assets/img/4.png" alt="" srcset="" />
-         </div>
+        <div class="run-status fullClass">
+          <div class="run-status-body">
+            <div class="status-text">运行状态</div>
+            <img src="@/assets/img/4.png" alt="" srcset="" />
+          </div>
           <div :class="['status-result', 'status-result' + runStatusColor]">
             {{ runStatusText }}
           </div>
@@ -218,16 +265,18 @@
                   style="width: 600px"
                   class="custom-table blackTable"
                 >
-                  <el-table-column width="200" property="deviation_value" label="偏离值" />
+                  <el-table-column
+                    width="200"
+                    property="deviation_value"
+                    label="偏离值"
+                  />
                   <el-table-column
                     width="200"
                     property="deviation_percentage"
-                    label="偏离百分比">
-                      <template #default="scope">
-            
-                        <div >
-                          {{ scope.row.deviation_percentage }}%
-                        </div>
+                    label="偏离百分比"
+                  >
+                    <template #default="scope">
+                      <div>{{ scope.row.deviation_percentage }}%</div>
                     </template>
                   </el-table-column>
                   <el-table-column
@@ -236,12 +285,12 @@
                     label="健康程度"
                   >
                     <template #default="scope">
-                      <el-button
-                        link
-                        type="primary"
-                        size="small"
-                      >
-                        <div :style="{ color: healthColor(scope.row.health_status) }">
+                      <el-button link type="primary" size="small">
+                        <div
+                          :style="{
+                            color: healthColor(scope.row.health_status),
+                          }"
+                        >
                           {{ scope.row.health_status }}
                         </div>
                       </el-button>
@@ -251,8 +300,14 @@
               </el-popover>
             </div>
             <img src="@/assets/img/4.png" alt="" srcset="" />
-            <div :class="['health-result','health-result-'+healthyStatusText.color]" @click="getTip()">
-             {{healthyStatusText.name}}
+            <div
+              :class="[
+                'health-result',
+                'health-result-' + healthyStatusText.color,
+              ]"
+              @click="getTip()"
+            >
+              {{ healthyStatusText.name }}
             </div>
           </div>
           <div class="status-btn" @click="goResult">记录评估结果</div>
@@ -330,20 +385,27 @@
   >
     <!-- 模态框内容插槽 -->
     <div class="custom-warn-box">
-      <div
-        :key="item.id"
-        :class="[
-          'warn-list',
-          item.type == 3||item.type == 1
-            ? 'warn-list-d-bac'
-            : item.type == 2
-            ? 'warn-list-w-bac'
-            : '',
-        ]"
+      <el-tooltip
         v-for="item in warnList"
+        :key="item.id"
+        class="item"
+        effect="dark"
+        :content="tag"
+        placement="top"
       >
-        {{ item.text }}
-      </div>
+        <div
+          :class="[
+            'warn-list',
+            item.type == 3 || item.type == 1
+              ? 'warn-list-d-bac'
+              : item.type == 2
+              ? 'warn-list-w-bac'
+              : '',
+          ]"
+        >
+          {{ item.text }}
+        </div>
+      </el-tooltip>
     </div>
   </ModalComponent>
 </template>
@@ -359,7 +421,8 @@ import {
   nextTick,
   computed,
   watch,
-  Ref,getCurrentInstance
+  Ref,
+  getCurrentInstance,
 } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { ElTimeSelect, ElMessage } from "element-plus";
@@ -371,17 +434,28 @@ import ModalComponent from "@/components/ModalComponent/index.vue";
 import WebSocketClient from "@/utils/webSocketClient";
 import { Interface } from "readline";
 import { time } from "console";
-import {recordAssessmentResult,healthStatusTip,healthySetList} from '@/api/index'
+import {
+  recordAssessmentResult,
+  healthStatusTip,
+  healthySetList,
+} from "@/api/index";
 const wsUrl = import.meta.env.VITE_WS_URL as string;
 const wsClient = new WebSocketClient(wsUrl);
 const { proxy } = getCurrentInstance()!;
-let gridData=ref(null)
-const getHStatus=async ()=>{
-  let result=await healthySetList({})
-gridData.value=result.data
-}
+let gridData = ref(null);
+const getHStatus = async () => {
+  let result = await healthySetList({});
+  gridData.value = result.data;
+};
 onMounted(() => {
-  getHStatus()
+  getHStatus();
+  if (!!sessionStorage.getItem("runStatus")) {
+    runstatusMessage(JSON.parse(sessionStorage.getItem("runStatus")));
+  }
+  if (!!sessionStorage.getItem("healthyStatusText")) {
+    healthyMessage(JSON.parse(sessionStorage.getItem("healthyStatusText")));
+  }
+
   nextTick(() => {});
 
   wsClient.connect();
@@ -406,8 +480,8 @@ onMounted(() => {
 
         break;
       case "3":
-         if (Object.keys(newData.data).length > 0) {
-                 healthyMessage(newData.data);
+        if (Object.keys(newData.data).length > 0) {
+          healthyMessage(newData.data);
         }
         break;
       case "4":
@@ -424,31 +498,31 @@ onUnmounted(() => {
   wsClient.onClose();
 });
 // 获取警告提示
-const getTip=()=>{
-
-      proxy.$loading.start();
-      showWarningModal.value=true
-  healthStatusTip({}).then((res:any)=>{
-        proxy.$loading.stop();
-        let arr:any=[]
-        res.data.map((its:any,index:number)=>{
-          let rst=its.split('|')
-          arr.push({
-               id: index+1, type: rst[0], text: rst[1]
-          })
-        })
-    warnList.value=arr
-
-
-  })
+const getTip = () => {
+  proxy.$loading.start();
+  showWarningModal.value = true;
+  healthStatusTip({})
+    .then((res: any) => {
+      proxy.$loading.stop();
+      let arr: any = [];
+      res.data.map((its: any, index: number) => {
+        let rst = its.split("|");
+        arr.push({
+          id: index + 1,
+          type: rst[0],
+          text: rst[1],
+        });
+      });
+      warnList.value = arr;
+    })
     .catch((error: any) => {
       proxy.$loading.stop();
       ElMessage({
-        message: `获取警告提示失败: ${error.message || '未知错误'}`,
-        type: 'error',
+        message: `获取警告提示失败: ${error.message || "未知错误"}`,
+        type: "error",
       });
     });
-}
+};
 // 获取所有显示参数
 let lineParamsAllRef = ref([]);
 const dealMessage = (data: string) => {
@@ -499,13 +573,15 @@ const setLineparames = (
   selectData: Array<AnyObject>
 ) => {
   // 横坐标时间点
-  xAxisParamsData.value = dataAll.map((its) => moment(its.data._ts).format('HH:mm:ss') ).slice(-30);
+  xAxisParamsData.value = dataAll
+    .map((its) => moment(its.data._ts).format("HH:mm:ss"))
+    .slice(-30);
   // 折线图数据
   seriesParamsData.value = selectData.map((its) => {
-  return {
+    return {
       ...its,
-    data:its.data.slice(-30)
-  }
+      data: its.data.slice(-30),
+    };
   });
   // 图例
   legendPramsData.value = selectData.map((its) => its.name);
@@ -534,7 +610,7 @@ const convertToChartData = (
 };
 const formatPressure = (value: number | string) => {
   // console.log(typeof value,'------');
-  
+
   // if (typeof value == 'string') {
   //   return Number(value).toFixed(2);
   // }
@@ -555,9 +631,10 @@ let machineImgParamsRef = ref({
 watch(
   () => lineParamsAllRef.value,
   (newdata: any) => {
-    machineImgParamsRef.value = lineParamsAllRef.value[lineParamsAllRef.value.length - 1].data;
-    console.log('machineImgParamsRef.value',machineImgParamsRef.value);
-    
+    machineImgParamsRef.value =
+      lineParamsAllRef.value[lineParamsAllRef.value.length - 1].data;
+    console.log("machineImgParamsRef.value", machineImgParamsRef.value);
+
     const result: Array<AnyObject> = convertToChartData(
       newdata,
       checkedParams.value
@@ -575,8 +652,7 @@ const changeAttr = (val: string[]) => {
       type: "error",
     });
     checkedParams.value = checkedParams.value.slice(0, 5);
-    console.log(checkedParams.value );
-    
+    console.log(checkedParams.value);
   }
 };
 // 健康状态评估结果(模态框)
@@ -622,7 +698,8 @@ const generatePastWeekData = (
 // 获取所有显示参数
 let workParamsAllRef: Ref<DataPoint[]> = ref([]);
 // 历史工况记录 chartData 实际图表展示的
-const chartData: Ref<DataPoint[]> = ref([]
+const chartData: Ref<DataPoint[]> = ref(
+  []
   // [
   //   { x: 0, y: 0, value: 5, type: "p" },
   // ].concat(generatePastWeekData(0, 3))
@@ -649,6 +726,7 @@ const runstatusMessage = (data: { label: string; state: 0 | 1 | 2 }) => {
   // 获取工况状态
   runStatusText.value = enumParasm[data.state].text + `(${data.label})`;
   runStatusColor.value = enumParasm[data.state].color;
+  sessionStorage.setItem("runStatus", JSON.stringify(data));
 };
 const workMessage = (data: Object) => {
   // 获取工况数据 一小时来一次
@@ -659,7 +737,7 @@ const workMessage = (data: Object) => {
   // let currentValue=workParamsAllRef.value
   // workParamsAllRef.value = currentValue.concat(data);
   workParamsAllRef.value = data;
-  workChange()
+  workChange();
 };
 const statusGk = ref([
   {
@@ -695,64 +773,72 @@ const convertTo24Hour = (timeStr: string) => {
  */
 const convertTo12HourFormat = (hour: number): string => {
   if (hour === 0 || hour === 24) {
-    return '12a';
+    return "12a";
   } else if (hour === 12) {
-    return '12p';
+    return "12p";
   } else if (hour > 12) {
     return `${hour - 12}p`;
   } else {
     return `${hour}a`;
   }
-}
+};
 // { x: 0, y: 0, value: 5, type: "p" }
-const transformData= (data:DataPoint[]) => {
+const transformData = (data: DataPoint[]) => {
   const weekDayMap = {
-    "星期一": '周一',
-    "星期二": '周二',
-    "星期三": '周三',
-    "星期四": '周四',
-    "星期五": '周五',
-    "星期六": '周六',
-    "星期日": '周日'
+    星期一: "周一",
+    星期二: "周二",
+    星期三: "周三",
+    星期四: "周四",
+    星期五: "周五",
+    星期六: "周六",
+    星期日: "周日",
   };
-  return data.map(item => {
+  return data.map((item) => {
     const { x, y, type, ...rest } = item;
     let valueArray = [];
 
     // 遍历剩余的键,将它们转换为所需的格式
     for (const key in rest) {
       const entry = rest[key];
-   
+
       if (Array.isArray(entry)) {
-          valueArray.push({ name: key, value: entry });
+        valueArray.push({ name: key, value: entry });
       }
     }
     return {
       x: convertTo12HourFormat(x),
       y: weekDayMap[y],
-      value:valueArray,
-      type: `${type}`
+      value: valueArray,
+      type: `${type}`,
     };
   });
 };
 // 筛选 如果条件都有数值 在进行查询
 const workChange = () => {
-  let lastResult=[]
+  let lastResult = [];
   if (hlQueryParams.value.sDate && hlQueryParams.value.eDate) {
     const sDate: string = convertTo24Hour(hlQueryParams.value.sDate);
     const eDate: string = convertTo24Hour(hlQueryParams.value.eDate);
     let result = workParamsAllRef.value.filter((obj: DataPoint) => {
-     return  obj.x >= Number(sDate) && obj.x <= Number(eDate)&&(hlQueryParams.value.tStatus=='all'?true:obj.type==hlQueryParams.value.tStatus);
+      return (
+        obj.x >= Number(sDate) &&
+        obj.x <= Number(eDate) &&
+        (hlQueryParams.value.tStatus == "all"
+          ? true
+          : obj.type == hlQueryParams.value.tStatus)
+      );
     });
-    lastResult=result
+    lastResult = result;
   }
   if (!!!hlQueryParams.value.sDate || !!!hlQueryParams.value.eDate) {
-        let result = workParamsAllRef.value.filter((obj: DataPoint) => {
-     return (hlQueryParams.value.tStatus=='all'?true:obj.type==hlQueryParams.value.tStatus);
+    let result = workParamsAllRef.value.filter((obj: DataPoint) => {
+      return hlQueryParams.value.tStatus == "all"
+        ? true
+        : obj.type == hlQueryParams.value.tStatus;
     });
-    lastResult=result
-    }
-    chartData.value=transformData(lastResult)
+    lastResult = result;
+  }
+  chartData.value = transformData(lastResult);
 };
 
 // 健康状态
@@ -761,12 +847,12 @@ const goResult = () => {
   //   path: "/OperationalReliabilityPrediction",
   //   query: {},
   // });
-  recordAssessmentResult({source:1}).then((res:any)=>{
-     ElMessage({
+  recordAssessmentResult({ source: 1 }).then((res: any) => {
+    ElMessage({
       message: `操作成功`,
       type: "success",
     });
-  })
+  });
 };
 const xAxisData = ref([]);
 const seriesData = ref([
@@ -778,10 +864,10 @@ const seriesData = ref([
 const showLegend = ref(false);
 const legendData = ref(["趋势"]);
 const healthyStatusText = ref({
-  name:'',
-  color:''
+  name: "",
+  color: "",
 });
-let flag = false
+let flag = false;
 const healthyMessage = (data: Object) => {
   // if (data.avg_num == 99) {
   //   if (flag) {
@@ -795,15 +881,18 @@ const healthyMessage = (data: Object) => {
 
   // 获取健康数据
   // let obj=determineHealthStatus(data.avg_num)
-  let obj=determineHealthStatus(`${data.sha}(${data.avg_num}%)`)
-  healthyStatusText.value=obj
-  xAxisData.value.push(moment(data.date).format('HH:mm:ss'));
-  seriesData.value[0].data.push(data.avg_num)
-  let arr=seriesData.value[0].data
-  seriesData.value=[{
-    name: "趋势",
-    data:arr
-  }]
+  let obj = determineHealthStatus(`${data.sha}(${data.avg_num}%)`);
+  healthyStatusText.value = obj;
+  sessionStorage.setItem("healthyStatusText", JSON.stringify(data));
+  xAxisData.value.push(moment(data.date).format("HH:mm:ss"));
+  seriesData.value[0].data.push(data.avg_num);
+  let arr = seriesData.value[0].data;
+  seriesData.value = [
+    {
+      name: "趋势",
+      data: arr,
+    },
+  ];
 };
 interface HealthData {
   id: number;
@@ -812,29 +901,28 @@ interface HealthData {
   health_status: string;
 }
 const determineHealthStatus = (value: string) => {
-  if (value.includes('健康')) {
-    return  {
-      name:value,
-      color:''
+  if (value.includes("健康")) {
+    return {
+      name: value,
+      color: "",
     };
-  } else if (value.includes('轻微')) {
+  } else if (value.includes("轻微")) {
     return {
-    name:value,
-      color:'warn'
+      name: value,
+      color: "warn",
     };
-  } else if (value.includes('严重')) {
-       return {
-    name:value,
-      color:'error'
+  } else if (value.includes("严重")) {
+    return {
+      name: value,
+      color: "error",
     };
-  } else if (value.includes('故障')) {
-       return {
-    name:value,
-      color:'danger'
+  } else if (value.includes("故障")) {
+    return {
+      name: value,
+      color: "danger",
     };
   }
   return "未知状态"; // 如果数据不在任何已定义的范围内
-
 };
 const healthColor = (status: string) => {
   switch (status) {
@@ -853,10 +941,10 @@ const healthColor = (status: string) => {
 </script>
 
 <style scoped>
-.status-text{
-    white-space: nowrap
+.status-text {
+  white-space: nowrap;
 }
-.fullClass{
+.fullClass {
   /* width: 100% !important; */
 }
 .all-page {
@@ -967,7 +1055,7 @@ const healthColor = (status: string) => {
 .run-status {
   margin-top: 20px;
   display: flex;
-  justify-content:flex-start;
+  justify-content: flex-start;
   width: 100%;
   align-items: center;
   /* line-height: 60px; */
@@ -994,11 +1082,11 @@ const healthColor = (status: string) => {
   text-align: left;
   position: relative;
   padding: 0 50px;
-      white-space: pre-wrap; /* Allows wrapping */
-    word-break: break-word; /* Breaks words at arbitrary points */
-    max-width: 460px;
-    display: inline-block;
-    overflow-wrap: break-word; /* Ensures long words break */
+  white-space: pre-wrap; /* Allows wrapping */
+  word-break: break-word; /* Breaks words at arbitrary points */
+  max-width: 460px;
+  display: inline-block;
+  overflow-wrap: break-word; /* Ensures long words break */
 }
 .status-result-danger {
   background: linear-gradient(
@@ -1069,22 +1157,22 @@ const healthColor = (status: string) => {
   text-align: center;
   position: relative;
 }
-.health-result-warn{
-    background: linear-gradient(180deg, rgb(227, 194, 70), rgb(255, 255, 255));
+.health-result-warn {
+  background: linear-gradient(180deg, rgb(227, 194, 70), rgb(255, 255, 255));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   text-fill-color: transparent;
 }
-.health-result-danger{
-    background: linear-gradient(180deg, rgb(255, 97, 0), rgb(255, 255, 255));
+.health-result-danger {
+  background: linear-gradient(180deg, rgb(255, 97, 0), rgb(255, 255, 255));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   text-fill-color: transparent;
 }
-.health-result-error{
-    background: linear-gradient(180deg, rgb(252, 63, 63), rgb(255, 255, 255));
+.health-result-error {
+  background: linear-gradient(180deg, rgb(252, 63, 63), rgb(255, 255, 255));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -1181,6 +1269,9 @@ const healthColor = (status: string) => {
   padding-left: 100px;
   color: #fff;
   font-size: 18px;
+   overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .warn-list-d-bac {
   background: url(../../assets/img/danger.png);

+ 17 - 10
src/views/WarningSettings/index.vue

@@ -65,9 +65,9 @@
                   () => saveEdit(scope.row, `warning_message-${tagIndex}`)
                 "
                 class="custom-time-input"
-              />
+              />        <el-tooltip    v-else class="item" effect="dark" :content="tag" placement="top">
               <div
-                v-else
+             
                 class="tag-col"
                 @dblclick="
                   editCell(scope.$index, `warning_message-${tagIndex}`)
@@ -75,6 +75,7 @@
               >
                 {{ tag }}
               </div>
+                </el-tooltip>
             </div>
           </template>
         </el-table-column>
@@ -106,9 +107,9 @@
                     )
                 "
                 class="custom-time-input"
-              />
+              />    <el-tooltip  v-else class="item" effect="dark" :content="tag" placement="top">
               <div
-                v-else
+    
                 class="tag-col"
                 @dblclick="
                   editCell(
@@ -117,8 +118,10 @@
                   )
                 "
               >
+         
                 {{ tag }}
               </div>
+                </el-tooltip>
             </div>
           </template>
         </el-table-column>
@@ -142,16 +145,18 @@
                   () => saveEdit(scope.row, `maintenance_method-${tagIndex}`)
                 "
                 class="custom-time-input"
-              />
+              />        <el-tooltip  v-else class="item" effect="dark" :content="tag" placement="top">
               <div
-                v-else
+               
                 class="tag-col"
                 @dblclick="
                   editCell(scope.$index, `maintenance_method-${tagIndex}`)
                 "
               >
+    
                 {{ tag }}
-              </div>
+               
+              </div> </el-tooltip>
             </div>
           </template>
         </el-table-column>
@@ -175,16 +180,18 @@
                   () => saveEdit(scope.row, `required_resources-${tagIndex}`)
                 "
                 class="custom-time-input"
-              />
+              /> <el-tooltip   v-else class="item" effect="dark" :content="tag" placement="top">
               <div
-                v-else
+              
                 class="tag-col"
                 @dblclick="
                   editCell(scope.$index, `required_resources-${tagIndex}`)
                 "
               >
+                  
                 {{ tag }}
-              </div>
+              
+              </div>  </el-tooltip>
             </div>
           </template>
         </el-table-column>