<template>
|
<!-- <el-descriptions :column="2" size="default" border>
|
<el-descriptions-item label="区域">
|
{{ locationStr }}
|
</el-descriptions-item>
|
<el-descriptions-item label="时间"> {{ time }} </el-descriptions-item>
|
<el-descriptions-item label="描述">
|
<span class="description"> {{ description }} </span>
|
</el-descriptions-item>
|
</el-descriptions> -->
|
<span class="description"> {{ description }} </span>
|
</template>
|
<script>
|
import taskApi from '@/api/fysp/taskApi.js';
|
import dayjs from 'dayjs';
|
export default {
|
watch: {
|
tableData: {
|
handler(nv, ov) {
|
if (nv == null || nv.length == 0) {
|
this.init()
|
return;
|
}
|
this.countScenseNum();
|
this.countTownScenses();
|
this.countTown();
|
this.countExistTopTask();
|
this.countOnline();
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
props: {
|
location: {},
|
tableData: []
|
},
|
computed: {
|
time() {
|
if (!this.tableData || this.tableData.length == 0) {
|
return '';
|
} else {
|
return dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss');
|
}
|
},
|
locationStr() {
|
let result = '';
|
if (this.location.pName) {
|
// result += this.location.pName;
|
if (this.location.cName) {
|
result += this.location.cName;
|
if (this.location.dName) {
|
result += this.location.dName;
|
if (this.location.tName) {
|
result += this.location.tName;
|
}
|
}
|
}
|
}
|
if (result == '') {
|
if (this.location.pName) {
|
result += this.location.pName;
|
}
|
}
|
return result;
|
},
|
description() {
|
let result = '';
|
if (!this.tableData || this.tableData.length == 0) {
|
return result;
|
}
|
// result += `${this.startStr()}当前清单包括`;
|
result += this.startStr()
|
result += `当前场景清单包括`;
|
result += this.scenses.map((item) => item.type).join(',') + '场景类型，';
|
result += `总计${this.scenseNum}种场景`;
|
result += this.endStr();
|
result += `${
|
Array.from(new Set(this.tableData.map((item) => item.townname))).length
|
}个街道，`;
|
// 场景分布
|
result = this.buildTownScenses(result);
|
result = this.buildScenseDistribution(result);
|
result = this.buildOnline(result);
|
result = this.buildExistTopTask(result);
|
this.$emit('generated-description', result);
|
return result;
|
}
|
},
|
data() {
|
return {
|
scenseNum: 0,
|
scenses: [],
|
towns: [
|
// {
|
// name: '',
|
// scense: 0
|
// }
|
],
|
townScenses: [],
|
existTopTaskNum: 0,
|
noExistTopTaskNum: 0,
|
online: 0,
|
noOnline: 0
|
};
|
},
|
mounted() {
|
this.countScenseNum();
|
this.countTown();
|
this.countOnline();
|
this.countExistTopTask();
|
},
|
methods: {
|
// 段首
|
startStr() {
|
return `${' '}`;
|
},
|
// 段尾
|
endStr() {
|
return '。';
|
},
|
init() {
|
this.scenseNum = 0,
|
this.scenses = [],
|
this.towns = [
|
// {
|
// name: '',
|
// scense: 0
|
// }
|
],
|
this.townScenses = [],
|
this.existTopTaskNum = 0,
|
this.noExistTopTaskNum = 0,
|
this.online = 0,
|
this.noOnline = 0
|
},
|
countTownScenses() {
|
this.townScenses = [];
|
const groupedData = this.tableData.reduce((acc, current) => {
|
if (!acc[current.townname]) {
|
acc[current.townname] = {
|
type: [current.type]
|
};
|
}
|
if (acc[current.townname].type.indexOf(current.type) == -1) {
|
acc[current.townname].type.push(current.type);
|
}
|
return acc;
|
}, {});
|
for (const prop in groupedData) {
|
this.townScenses.push({
|
name: prop,
|
types: groupedData[prop].type
|
});
|
}
|
},
|
buildTownScenses(result) {
|
// result += this.startStr()
|
for (let index = 0; index < this.townScenses.length; index++) {
|
const item = this.townScenses[index];
|
if (index == 0) {
|
result += `${item.name}${item.types.length}种场景(${item.types.join(
|
'，'
|
)})`;
|
} else {
|
result += `，${item.name}${item.types.length}种场景(${item.types.join(
|
'，'
|
)})`;
|
}
|
}
|
result += this.endStr();
|
return result;
|
},
|
getDescription() {
|
let obj = {
|
description: this.description,
|
location: this.locationStr,
|
time: this.time
|
};
|
return obj;
|
},
|
buildOnline(result) {
|
// result += this.startStr()
|
result +=
|
`在线数量${this.online}个，下线数量${this.noOnline}个` + this.endStr();
|
return result;
|
},
|
// 是否在监管任务中
|
buildExistTopTask(result) {
|
// result += this.startStr()
|
result +=
|
`在线的${this.online}个场景中${this.existTopTaskNum}个场景在监管任务中，${this.noExistTopTaskNum}个场景不在监管任务中` +
|
this.endStr();
|
return result;
|
},
|
// 场景分布
|
buildScenseDistribution(result) {
|
// result += this.startStr()
|
|
result += `${this.tableData.length}个场景，`;
|
for (let index = 0; index < this.towns.length; index++) {
|
const item = this.towns[index];
|
if (index == 0) {
|
result += `${item.name}${item.town}个`;
|
} else {
|
result += `，${item.name}${item.town}个`;
|
}
|
}
|
result += this.endStr();
|
return result;
|
},
|
// 是否在线
|
countOnline() {
|
this.online = this.tableData.filter(
|
(item) => item.extension1 == 1
|
).length;
|
this.noOnline = this.tableData.filter(
|
(item) => item.extension1 != 1
|
).length;
|
},
|
countExistTopTask() {
|
taskApi.getTopTask().then((res) => {
|
const topTaskId = res[0].tguid;
|
taskApi.fetchMonitorObjectVersion(topTaskId).then((subTaskRes) => {
|
let alreadyExistTopTask = subTaskRes.map((item) => item.sguid);
|
this.noExistTopTaskNum = 0;
|
this.existTopTaskNum = 0;
|
this.tableData
|
.filter((item) => item.extension1 == 1)
|
.forEach((e) => {
|
if (alreadyExistTopTask.indexOf(e.guid) == -1) {
|
e._isExistInTopTask = '不在监管计划内';
|
this.noExistTopTaskNum++;
|
} else {
|
e._isExistInTopTask = '在监管计划内';
|
this.existTopTaskNum++;
|
}
|
});
|
});
|
});
|
},
|
countScenseNum() {
|
this.scenses = [];
|
let scenseIds = this.scenses.map((item) => item.typeid);
|
this.tableData.forEach((item) => {
|
if (scenseIds.indexOf(item.typeid) == -1) {
|
this.scenses.push(item);
|
scenseIds.push(item.typeid);
|
}
|
});
|
this.scenseNum = scenseIds.length;
|
},
|
countTown() {
|
this.towns = [];
|
|
const groupedData = this.tableData.reduce((acc, current) => {
|
if (!acc[current.type]) {
|
acc[current.type] = {
|
name: current.type,
|
town: 1
|
};
|
}
|
let town = {
|
name: current.type,
|
town: acc[current.type].town + 1
|
};
|
acc[current.type] = town;
|
return acc;
|
}, {});
|
for (const prop in groupedData) {
|
this.towns.push({
|
name: prop,
|
town: groupedData[prop].town
|
});
|
}
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.description {
|
display: block;
|
white-space: pre-wrap;
|
width: 100%;
|
}
|
</style>
|
