<template>
|
<ul class="list-container">
|
<template v-for="(item, index) in dataList" :key="index">
|
<li
|
:class="
|
'list-item ' + (item.selected ? 'list-item__selected' : '')
|
"
|
@click="selectItem(item)"
|
v-if="!item.delete"
|
>
|
<div class="clue-item">
|
<div class="flex gap-1">
|
<div class="clue-num">{{ $nf(item.cid) }}</div>
|
<el-text class="fy-h1" truncated>{{ item.cclueName }}</el-text>
|
</div>
|
<div class="flex gap-1">
|
<div class="">
|
<el-text type="info" size="small">结论：</el-text>
|
<el-text size="small">{{ item.conclusionCount + '/1' }}</el-text>
|
</div>
|
<div class="">
|
<el-text type="info" size="small">问题：</el-text>
|
<el-text size="small">{{ item.questionCount }}</el-text>
|
</div>
|
<el-text type="info" size="small">{{item.cuploaded ? '已推送' : '未推送'}}</el-text>
|
</div>
|
<el-row justify="space-between">
|
<span class="flex gap-1">
|
<el-tag v-if="item.csiteType" size="default" type="info">{{
|
item.csiteType
|
}}</el-tag>
|
<el-tag v-if="item.cfactor" size="default" effect="" type="danger">{{
|
item.cfactor
|
}}</el-tag>
|
</span>
|
<el-text size="small">下发时间：{{
|
$tf(item.creleaseTime)
|
}}</el-text>
|
</el-row>
|
</div>
|
</li>
|
</template>
|
</ul>
|
</template>
|
|
<script>
|
import baseMapUtil from '@/components/map/baseMapUtil';
|
|
var _marker;
|
export default {
|
props: {
|
dataList: Array
|
},
|
emits: ['itemSelected'],
|
data() {
|
return {};
|
},
|
watch: {},
|
methods: {
|
// 列表选择
|
selectItem(item) {
|
this.clearSelect();
|
item.selected = true;
|
// const lnglat = baseMapUtil.wgs84togcj02(
|
// item.clongitude,
|
// item.clatitude
|
// );
|
baseMapUtil
|
.gpsConvert([item.clongitude, item.clatitude])
|
.then((lnglat) => {
|
baseMapUtil.removeView(_marker);
|
_marker = baseMapUtil.addMarker(lnglat);
|
});
|
this.$emit('itemSelected', item);
|
},
|
clearSelect() {
|
this.dataList.forEach((e) => {
|
e.selected = false;
|
});
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.list-container {
|
padding: initial;
|
/* border: var(--el-border); */
|
font-size: var(--el-font-size-base);
|
}
|
|
.list-item {
|
padding: 4px;
|
list-style-type: none;
|
border: var(--el-border);
|
border-radius: var(--el-border-radius-base);
|
box-shadow: var(--el-box-shadow-lighter);
|
margin-bottom: 6px;
|
cursor: pointer;
|
}
|
|
.list-item:hover {
|
background-color: var(--el-color-primary-light-9);
|
}
|
|
.list-item__selected {
|
background-color: var(--el-color-primary-light-9);
|
}
|
|
.v-enter-from,
|
.v-leave-to {
|
opacity: 0;
|
transform: translateX(8px);
|
}
|
|
.v-enter-active,
|
.v-leave-active {
|
transition: all 0.3s ease-out;
|
}
|
|
.clue-item {
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
}
|
|
.clue-num {
|
font-size: 16px;
|
font-weight: 700;
|
font-style: italic;
|
color: var(--el-color-primary);
|
}
|
|
.clue-tag {
|
display: flex;
|
flex-direction: column;
|
justify-content: flex-start;
|
}
|
</style>
|
