2025.7.18 监管任务模块 1. 监管场景样式优化； 2. 新增监管场景GIS地图展示（待完成）；

riku

2025-07-18 803b93038ca16e21ea60a260ca4ac882b84a87ef

 src/components/list-item/ItemMonitorObj.vue

@@ -1,24 +1,53 @@
<template>
  <!-- <el-card shadow="hover"> -->
  <div class="wrapper">
  <div :class="statusClass + ' wrapper'">
    <div>
      <el-text>{{ item.displayid }}、</el-text>
      <el-text truncated class="w-250px">{{ item.sensename }}</el-text>
      <!-- <el-text>{{ item.displayid }}、</el-text> -->
      <el-text tag="b" class="text-line-2">
        {{ item.displayid + '、' + item.sensename }}
      </el-text>
    </div>
    <!-- <div>
      <el-text>地址：{{ item.location }}</el-text>
    </div> -->
    <div>
      <el-text truncated class="w-250px" type="info">
        <el-icon><LocationInformation /></el-icon>
        {{ item.scene.location }}
      </el-text>
    </div>
    <el-row justify="space-between" style="margin-top: 4px">
      <el-space>
        <el-tag type="info" effect="plain" size="small">
        <el-tag
          v-if="item.extension1 == '1'"
          type="success"
          effect="plain"
          size="small"
        >
          <el-icon :size="8"><Select /></el-icon>
          <span>已监管</span>
        </el-tag>
        <el-tag
          v-else-if="!item.extension1 || item.extension1 == '0'"
          type="danger"
          effect="plain"
          size="small"
        >
          <el-icon :size="8"><CloseBold /></el-icon>
          <span>未监管</span>
        </el-tag>
        <el-tag v-else type="primary" effect="plain" size="small">
          <el-icon :size="8"><Select /></el-icon>
          <span>已复核</span>
        </el-tag>
        <!-- <el-tag type="info" effect="plain" size="small">
          {{ item.sceneType }}
        </el-tag> -->
        <el-space>
          <el-tag type="info" size="small">
            计划：{{ item.monitornum }}次
        </el-tag>
        <el-tag type="info" effect="plain" size="small">
          计划监管：{{ item.monitornum }}
          <el-tag type="info" size="small">
            监管：{{ item.extension1 ? item.extension1 : '0' }}次
        </el-tag>
        <el-tag type="info" effect="plain" size="small">
          已监管：{{ item.extension1 ? item.extension1 : '0' }}
        </el-tag>
        </el-space>
      </el-space>
      <slot :item="item"></slot>
      <!-- <el-button size="small" type="success" @click="add">添加</el-button> -->
@@ -30,7 +59,7 @@
/**
 * 监管对象
 */

import { computed } from 'vue';

const props = defineProps({
  item: {
@@ -40,6 +69,16 @@
});

const emit = defineEmits(['add']);

const statusClass = computed(() => {
  if (!props.item.extension1 || props.item.extension1 == '0') {
    return 'border-bottom-danger';
  } else if (props.item.extension1 == '1') {
    return 'border-bottom-success';
  } else {
    return 'border-bottom-primary';
  }
});

function add() {
  emit('add', props.item);
@@ -51,5 +90,29 @@
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
  padding: 4px 8px;
  box-shadow: var(--el-box-shadow-light);
}

.text-line-2 {
  width: 300px;
  height: 40px;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.border-bottom-success {
  border-left: 3px solid var(--el-color-success);
}

.border-bottom-danger {
  border-left: 3px solid var(--el-color-danger);
}

.border-bottom-primary {
  border-left: 3px solid var(--el-color-primary);
}
</style>