| | |
| | | <template> |
| | | <CardDialog |
| | | <!-- <CardDialog |
| | | :model-value="modelValue" |
| | | @update:model-value="handleDialogShow" |
| | | title="污染线索" |
| | |
| | | :modal="false" |
| | | width="400px" |
| | | > |
| | | <template #default> |
| | | <template v-if="item"> |
| | | <template #default> --> |
| | | <BaseCard v-if="item" v-show="modelValue"> |
| | | <template #content> |
| | | <el-scrollbar class="clue-card"> |
| | | <el-row justify="space-between" align="bottom"> |
| | | <el-text type="danger" style="font-weight: 600" size="large"> |
| | | 污染线索 |
| | | </el-text> |
| | | |
| | | <el-link |
| | | type="info" |
| | | :underline="true" |
| | | @click="handleDialogShow(!modelValue)" |
| | | > |
| | | {{ modelValue ? '收起' : '打开' }} |
| | | <el-icon size="large"><CircleClose /></el-icon> |
| | | </el-link> |
| | | </el-row> |
| | | <el-row> |
| | | <el-text type="primary" size="small">{{ item._timestr }}</el-text> |
| | | <el-text type="info" size="small">{{ item._timestr }}</el-text> |
| | | </el-row> |
| | | <el-space> |
| | | <el-icon color="#F56C6C" :size="40"><WarnTriangleFilled /></el-icon> |
| | | <el-text type="primary"> |
| | | <el-text type="info"> |
| | | {{ item.advice }} |
| | | </el-text> |
| | | </el-space> |
| | | <el-row justify="space-between"> |
| | | <el-text type="primary" size="small"> |
| | | <el-text type="info" size="small"> |
| | | 推荐路线总长{{ item.direction.distance }}米 |
| | | </el-text> |
| | | <el-link type="primary" size="small" @click="showPolyline"> |
| | | <el-link type="info" size="small" @click="showPolyline"> |
| | | {{ lineShow ? '收起路线' : '定位路线' }} |
| | | </el-link> |
| | | </el-row> |
| | |
| | | > |
| | | <el-table-column prop="_count" width="42" label="溯源次数" /> |
| | | </SceneTable> |
| | | </template> |
| | | </el-scrollbar> |
| | | </template> |
| | | </BaseCard> |
| | | <!-- </template> |
| | | <template #footer> </template> |
| | | </CardDialog> |
| | | </CardDialog> --> |
| | | </template> |
| | | <script setup> |
| | | import { ref, onMounted, onUnmounted, reactive, watch } from 'vue'; |
| | |
| | | watch( |
| | | () => [props.item, props.modelValue], |
| | | (nV, oV) => { |
| | | // 线索信息变更后,重新绘制路线图 |
| | | if (nV[0] != oV[0]) { |
| | | const polyline = mapLine.drawDirection( |
| | | nV[0].direction.paths.map((v) => [v.first, v.second]) |
| | |
| | | } |
| | | lastPolyline = polyline; |
| | | lineShow.value = true; |
| | | } else if (nV[1]) { |
| | | showPolyline(true); |
| | | } |
| | | // 显示隐藏变化时,对应显示或隐藏路线 |
| | | else if (nV[1] != oV[1]) { |
| | | // showPolyline(nV[1]); |
| | | handleDialogShow(nV[1]); |
| | | } |
| | | } |
| | | ); |
| | |
| | | :deep(.el-link) { |
| | | --el-link-text-color: #23dad1; |
| | | } */ |
| | | |
| | | .clue-card { |
| | | padding: 0 4px; |
| | | /* margin-right: 2px; */ |
| | | width: 340px; |
| | | height: 360px; |
| | | /* border-right: 1px solid white; */ |
| | | border-radius: 2px; |
| | | } |
| | | </style> |