|
@@ -11,62 +11,90 @@
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="item-label">面积(km²)</div>
|
|
|
- <div class="item-value">{{ validateNum(analysisData.area) }}</div>
|
|
|
+ <div class="item-value">{{ validateNum(analysisData.areaSize) }}</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="item-label">常住人口(万)</div>
|
|
|
- <div class="item-value">{{ validateNum(analysisData.populationNum) }}</div>
|
|
|
+ <div class="item-value">{{ validateNum(analysisData.populationSize) }}</div>
|
|
|
</div>
|
|
|
<div class="item">
|
|
|
<div class="item-label">GDP(万元)</div>
|
|
|
- <div class="item-value">{{ validateNum(analysisData.gdp) }}</div>
|
|
|
+ <div class="item-value">{{ validateNum(analysisData.GDP) }}</div>
|
|
|
</div>
|
|
|
<div class="flex" style="margin: 20px 0; width: 100%">
|
|
|
<el-input v-model="keyword" size="large" style="flex: 1" />
|
|
|
- <el-button type="primary" size="large">搜索</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="flex">
|
|
|
+ <div v-for="(item, index) in filteredList" :key="index" class="item2">{{ item.name + '(' + item.list.length + ')' }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup name="AnalyzeDataDialog">
|
|
|
import { validateNum } from '@/utils/ruoyi';
|
|
|
+import { getSpatialAnalysis } from '@/api/globalMap';
|
|
|
+import { deepClone } from '@/utils';
|
|
|
|
|
|
interface Props {
|
|
|
- analysisData: {
|
|
|
- townCount: string;
|
|
|
- villageCount: string;
|
|
|
- area: string;
|
|
|
- populationNum: string;
|
|
|
- gdp: string;
|
|
|
- };
|
|
|
+ location: {};
|
|
|
}
|
|
|
const props = withDefaults(defineProps<Props>(), {});
|
|
|
const keyword = ref('');
|
|
|
-// const analysisSpatialData = computed(() => {
|
|
|
-// const data = props.analysisData;
|
|
|
-// const data = {
|
|
|
-// // 镇数量
|
|
|
-// townCount: 0,
|
|
|
-// // 村数量
|
|
|
-// villageCount: 0,
|
|
|
-// // 面积
|
|
|
-// area: 0,
|
|
|
-// // 常住人口
|
|
|
-// populationNum: 0,
|
|
|
-// gdp: 0,
|
|
|
-// // 物资数
|
|
|
-// emergencyManagementCount: 0,
|
|
|
-// // 专家数
|
|
|
-// emergencyExpertCount: 0
|
|
|
-// };
|
|
|
-// for (let key in props.analysisData) {
|
|
|
-// // data.area = new BigNumber(data.area).plus(props.analysisData[key].area);
|
|
|
-// // data.expert = new BigNumber(data.expert).plus(props.analysisData[key].expert);
|
|
|
-// // analysisData[key] = '';
|
|
|
-// }
|
|
|
-// data.area = new BigNumber(data.area).dividedBy(1000000);
|
|
|
-// return data;
|
|
|
-// });
|
|
|
+let analysisData = ref({
|
|
|
+ townCount: '',
|
|
|
+ villageCount: '',
|
|
|
+ areaSize: '',
|
|
|
+ populationSize: '',
|
|
|
+ GDP: '',
|
|
|
+ list: []
|
|
|
+});
|
|
|
+const filteredList = computed(() => {
|
|
|
+ const data = deepClone(analysisData.value.list);
|
|
|
+ return data.filter((item) => {
|
|
|
+ if (!!keyword.value) {
|
|
|
+ // 模糊搜索逻辑,这里简单使用 includes 进行包含关系判断
|
|
|
+ let flag = item.name.toLowerCase().includes(keyword.value.toLowerCase());
|
|
|
+ if (flag) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ let res = filteredSubItems(item);
|
|
|
+ if (res && res.length > 0) {
|
|
|
+ item.list = res;
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+});
|
|
|
+const filteredSubItems = (parentItem) => {
|
|
|
+ return parentItem.list.filter((subItem) => {
|
|
|
+ return subItem.name.toLowerCase().includes(keyword.value.toLowerCase());
|
|
|
+ });
|
|
|
+};
|
|
|
+watch(
|
|
|
+ () => props.location,
|
|
|
+ () => {
|
|
|
+ getSpatialAnalysis(props.location).then((res) => {
|
|
|
+ if (res.data && res.data.list) {
|
|
|
+ const list = [];
|
|
|
+ res.data.list.forEach((item) => {
|
|
|
+ if (item.num > 0) {
|
|
|
+ list.push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ res.data.list = list;
|
|
|
+ }
|
|
|
+ analysisData.value = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ {
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+);
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -87,7 +115,9 @@ const keyword = ref('');
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
font-size: 36px;
|
|
|
- &:nth-child(3), &:nth-child(4), &:nth-child(5) {
|
|
|
+ &:nth-child(3),
|
|
|
+ &:nth-child(4),
|
|
|
+ &:nth-child(5) {
|
|
|
border-bottom: 1px solid #000;
|
|
|
}
|
|
|
&:nth-child(5) {
|
|
@@ -98,4 +128,10 @@ const keyword = ref('');
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.item2 {
|
|
|
+ background-color: #fff;
|
|
|
+ font-size: 36px;
|
|
|
+ padding: 10px 20px;
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
</style>
|