小鹏运营管理后台
parent: afb6ef1e | 补丁 | 提交 | ignore whitespace
董国庆
2026-06-16 2cb6f3eef012d9ec471cbfbbcfd8c0907657f479 
修改图片渲染
1个文件已修改
368 ■■■■■ 已修改文件
src/views/operations/taskOrder/taskOrderCenter/components/RegularDetailModal.vue 368 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 
 src/views/operations/taskOrder/taskOrderCenter/components/RegularDetailModal.vue


@@ -97,6 +97,9 @@


  return d.format("YYYY/MM/DD HH:mm");


}




const fallbackImage =


  "https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png";




const currentType = computed(() => {


  if (formModel.value.detectionDetailVO?.id) return "detection";


  if (formModel.value.chargingDetailVO?.id) return "charging";


@@ -155,10 +158,13 @@


  >


    <div v-if="currentDetail" class="regular-detail">


      <div class="vehicle-header">


        <img


          :src="vehicleImage"


        <n-image


          :src="vehicleImage || defaultCarImage"


          :fallback-src="defaultCarImage"


          :width="112"


          :height="64"


          class="vehicle-image"


          @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"


          object-fit="contain"


        />


        <div class="vehicle-text">


          <div class="plate-number">


@@ -252,61 +258,81 @@


        <div class="grid-gap-3">


          <div class="block">


            <div class="block-label">传感器清洁：</div>


            <div class="thumb-list">


              <img


                v-for="(item, idx) in getValidImageList(


                  currentDetail.sensorCleaningPicture


                )"


                :key="idx"


                :src="item.url"


                class="thumb"


                @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"


              />


            </div>


            <n-image-group>


              <div class="thumb-list">


                <n-image


                  v-for="(item, idx) in getValidImageList(


                    currentDetail.sensorCleaningPicture


                  )"


                  :key="idx"


                  :src="item.url"


                  :width="56"


                  :height="56"


                  class="thumb"


                  object-fit="contain"


                  :fallback-src="fallbackImage"


                />


              </div>


            </n-image-group>


          </div>


          <div class="block">


            <div class="block-label">紧急求组按钮/应答机：</div>


            <div class="thumb-list">


              <img


                v-for="(item, idx) in getValidImageList(


                  currentDetail.helpButtonPicture


                )"


                :key="idx"


                :src="item.url"


                class="thumb"


                @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"


              />


            </div>


            <n-image-group>


              <div class="thumb-list">


                <n-image


                  v-for="(item, idx) in getValidImageList(


                    currentDetail.helpButtonPicture


                  )"


                  :key="idx"


                  :src="item.url"


                  :width="56"


                  :height="56"


                  class="thumb"


                  object-fit="contain"


                  :fallback-src="fallbackImage"


                />


              </div>


            </n-image-group>


          </div>


          <div class="block">


            <div class="block-label">订单系统检查：</div>


            <div class="thumb-list">


              <img


                v-for="(item, idx) in getValidImageList(


                  currentDetail.systemCheckPicture


                )"


                :key="idx"


                :src="item.url"


                class="thumb"


                @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"


              />


            </div>


            <n-image-group>


              <div class="thumb-list">


                <n-image


                  v-for="(item, idx) in getValidImageList(


                    currentDetail.systemCheckPicture


                  )"


                  :key="idx"


                  :src="item.url"


                  :width="56"


                  :height="56"


                  class="thumb"


                  object-fit="contain"


                  :fallback-src="fallbackImage"


                />


              </div>


            </n-image-group>


          </div>


        </div>


        <div class="grid-gap-3">


          <div class="block">


            <div class="block-label">车内交互屏检查：</div>


            <div class="thumb-list">


              <img


                v-for="(item, idx) in getValidImageList(


                  currentDetail.interactiveScreenPicture


                )"


                :key="idx"


                :src="item.url"


                class="thumb"


                @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"


              />


            </div>


            <n-image-group>


              <div class="thumb-list">


                <n-image


                  v-for="(item, idx) in getValidImageList(


                    currentDetail.interactiveScreenPicture


                  )"


                  :key="idx"


                  :src="item.url"


                  :width="56"


                  :height="56"


                  class="thumb"


                  object-fit="contain"


                  :fallback-src="fallbackImage"


                />


              </div>


            </n-image-group>


          </div>




          <!-- <div class="block">


@@ -352,6 +378,7 @@


              <n-image


                :src="powerIcon"


                style="width: 25px; height: 12px"


                preview-disabled


              />


              <span style="color: #e85050; font-size: 11px"


                >{{ currentDetail.startRemainingBattery ?? "-" }} km</span


@@ -375,6 +402,7 @@


              <n-image


                :src="poweredIcon"


                style="width: 25px; height: 12px"


                preview-disabled


              />


              <span style="color: #06b752; font-size: 11px"


                >{{ currentDetail.endRemainingBattery ?? "-" }} km</span


@@ -390,28 +418,38 @@


        </div>


        <div class="mt-16px">


          <div class="kv-label mt-4px">充电图片</div>


          <div class="thumb-list">


            <img


              v-for="(item, idx) in getValidImageList(


                currentDetail.startChargingPicture


              )"


              :key="idx"


              :src="item.url"


              class="thumb"


              @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"


            />


            <template v-if="getValidImageList(currentDetail.endChargingPicture).length">


              <img


              v-for="(item, idx) in getValidImageList(


                currentDetail.endChargingPicture


              )"


              :key="idx"


              :src="item.url"


              class="thumb"


              @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"


            />


            </template>


          </div>


          <n-image-group>


            <div class="thumb-list">


              <n-image


                v-for="(item, idx) in getValidImageList(


                  currentDetail.startChargingPicture


                )"


                :key="`start-${idx}`"


                :src="item.url"


                :width="56"


                :height="56"


                class="thumb"


                object-fit="contain"


                :fallback-src="fallbackImage"


              />


              <template


                v-if="getValidImageList(currentDetail.endChargingPicture).length"


              >


                <n-image


                  v-for="(item, idx) in getValidImageList(


                    currentDetail.endChargingPicture


                  )"


                  :key="`end-${idx}`"


                  :src="item.url"


                  :width="56"


                  :height="56"


                  class="thumb"


                  object-fit="contain"


                  :fallback-src="fallbackImage"


                />


              </template>


            </div>


          </n-image-group>


        </div>


        <div class="flex mt-16px">


          <div class="flex-1">


@@ -489,45 +527,56 @@


        <div class="grid-gap-3">


          <div class="block">


            <div class="block-label color-06">大灯情况：</div>


            <div class="thumb-list">


              <img


                v-for="(item, idx) in getValidImageList(


                  currentDetail.headLight


                )"


                :key="idx"


                :src="item.url"


                class="thumb"


                @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"


              />


            </div>


            <n-image-group>


              <div class="thumb-list">


                <n-image


                  v-for="(item, idx) in getValidImageList(currentDetail.headLight)"


                  :key="idx"


                  :src="item.url"


                  :width="56"


                  :height="56"


                  class="thumb"


                  object-fit="contain"


                  :fallback-src="fallbackImage"


                />


              </div>


            </n-image-group>


          </div>


          <div class="block">


            <div class="block-label color-06">转向灯情况：</div>


            <div class="thumb-list">


              <img


                v-for="(item, idx) in getValidImageList(


                  currentDetail.turnSignal


                )"


                :key="idx"


                :src="item.url"


                class="thumb"


                @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"


              />


            </div>


            <n-image-group>


              <div class="thumb-list">


                <n-image


                  v-for="(item, idx) in getValidImageList(currentDetail.turnSignal)"


                  :key="idx"


                  :src="item.url"


                  :width="56"


                  :height="56"


                  class="thumb"


                  object-fit="contain"


                  :fallback-src="fallbackImage"


                />


              </div>


            </n-image-group>


          </div>


          <div class="block">


            <div class="block-label">舱内清洁及消毒</div>


            <div class="thumb-list">


              <img


                v-for="(item, idx) in getValidImageList(


                  currentDetail.cabinCleaning


                )"


                :key="idx"


                :src="item.url"


                class="thumb"


                @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"


              />


            </div>


            <n-image-group>


              <div class="thumb-list">


                <n-image


                  v-for="(item, idx) in getValidImageList(


                    currentDetail.cabinCleaning


                  )"


                  :key="idx"


                  :src="item.url"


                  :width="56"


                  :height="56"


                  class="thumb"


                  object-fit="contain"


                  :fallback-src="fallbackImage"


                />


              </div>


            </n-image-group>


          </div>


          <!-- <div class="block">


            <div class="block-label color-06">刹车灯情况：</div>


@@ -676,15 +725,20 @@


      <div v-else-if="currentType === 'clean'">


        <div class="block mt-16px">


          <div class="block-label color-06">图片</div>


          <div class="thumb-list">


            <img


              v-for="(item, idx) in getValidImageList(currentDetail.taskImage)"


              :key="idx"


              :src="item.url"


              class="thumb"


              @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"


            />


          </div>


          <n-image-group>


            <div class="thumb-list">


              <n-image


                v-for="(item, idx) in getValidImageList(currentDetail.taskImage)"


                :key="idx"


                :src="item.url"


                :width="56"


                :height="56"


                class="thumb"


                object-fit="contain"


                :fallback-src="fallbackImage"


              />


            </div>


          </n-image-group>


        </div>


        <div style="display: grid; grid-template-columns: 1fr 1fr">


          <div>


@@ -729,17 +783,22 @@


        </div>


        <div class="block mt-16px">


          <div class="kv-label mb-4px">维修前图片</div>


          <div class="thumb-list">


            <img


              v-for="(item, idx) in getValidImageList(


                currentDetail.startRepairPicture


              )"


              :key="idx"


              :src="item.url"


              class="thumb"


              @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"


            />


          </div>


          <n-image-group>


            <div class="thumb-list">


              <n-image


                v-for="(item, idx) in getValidImageList(


                  currentDetail.startRepairPicture


                )"


                :key="idx"


                :src="item.url"


                :width="56"


                :height="56"


                class="thumb"


                object-fit="contain"


                :fallback-src="fallbackImage"


              />


            </div>


          </n-image-group>


        </div>


        <div class="flex mt-16px">


          <div class="flex-1">


@@ -765,17 +824,22 @@


        </div>


        <div class="block mt-16px">


          <div class="kv-label mb-4px">维修费用明细单</div>


          <div class="thumb-list">


            <img


              v-for="(item, idx) in getValidImageList(


                currentDetail.repairMoneyDetail


              )"


              :key="idx"


              :src="item.url"


              class="thumb"


              @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"


            />


          </div>


          <n-image-group>


            <div class="thumb-list">


              <n-image


                v-for="(item, idx) in getValidImageList(


                  currentDetail.repairMoneyDetail


                )"


                :key="idx"


                :src="item.url"


                :width="56"


                :height="56"


                class="thumb"


                object-fit="contain"


                :fallback-src="fallbackImage"


              />


            </div>


          </n-image-group>


        </div>


        <div class="flex mt-16px">


          <div class="flex-1">


@@ -802,15 +866,20 @@


        </div>


        <div class="block">


          <div class="block-label color-06">图片</div>


          <div class="thumb-list">


            <img


              v-for="(item, idx) in getValidImageList(currentDetail.taskImage)"


              :key="idx"


              :src="item.url"


              class="thumb"


              @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }"


            />


          </div>


          <n-image-group>


            <div class="thumb-list">


              <n-image


                v-for="(item, idx) in getValidImageList(currentDetail.taskImage)"


                :key="idx"


                :src="item.url"


                :width="56"


                :height="56"


                class="thumb"


                object-fit="contain"


                :fallback-src="fallbackImage"


              />


            </div>


          </n-image-group>


        </div>


        <div style="display: grid; grid-template-columns: 1fr 1fr">


          <div>


@@ -845,11 +914,11 @@


}




.vehicle-image {


  width: 112px;


  height: 64px;


  border-radius: 4px;


  object-fit: contain;


  flex: none;


}




:deep(.vehicle-image img) {


  border-radius: 4px;


}




.vehicle-text {


@@ -977,10 +1046,11 @@


}




.thumb {


  width: 56px;


  height: 56px;


  overflow: hidden;


}




:deep(.thumb img) {


  border-radius: 4px;


  object-fit: contain;


}


.grid-gap-3 {


  display: grid;