<template>
|
<div class="home">
|
<div class="overview">
|
<div class="overview-top">
|
<div class="title">项目总览</div>
|
<div class="qurey">
|
<el-form ref="queryFormRef" :model="queryParams">
|
<div class="search_from">
|
<el-form-item label="日期">
|
<el-date-picker
|
style="width: 300px"
|
v-model="timeMerge"
|
clearable
|
end-placeholder="结束时间"
|
format="YYYY-MM-DD"
|
placeholder="请选择日期"
|
size="default"
|
start-placeholder="开始时间"
|
type="daterange"
|
value-format="YYYY-MM-DD"
|
@change="dataPickerChange"
|
/>
|
</el-form-item>
|
<el-form-item label="行政区划">
|
<el-select
|
v-model="queryParams.area"
|
clearable
|
placeholder="请选择区划"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="item in sys_administrative_divisions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item
|
label="投资金额"
|
style="margin-right: 50px"
|
>
|
<div class="from_input">
|
<el-input
|
v-model="queryParams.start"
|
clearable
|
placeholder="请输入"
|
style="width: 100px"
|
type="number"
|
/>
|
至
|
<el-input
|
v-model="queryParams.end"
|
clearable
|
placeholder="请输入"
|
style="width: 100px"
|
type="number"
|
/>
|
</div>
|
</el-form-item>
|
<el-form-item style="margin-right: 20px">
|
<el-button
|
icon="Search"
|
type="primary"
|
@click="handleQuery"
|
>搜索</el-button
|
>
|
<el-button icon="Refresh" @click="resetQuery"
|
>重置</el-button
|
>
|
</el-form-item>
|
</div>
|
</el-form>
|
</div>
|
</div>
|
<!-- 统计情况 -->
|
<ProjectOverview
|
:calculation="calculation"
|
:countExceptionProjectData="countExceptionProjectData"
|
/>
|
</div>
|
<!-- 代办事项 -->
|
<div class="flex">
|
<div class="flex_card">
|
<el-card>
|
<NoticeTable style="height: 360px" />
|
</el-card>
|
</div>
|
<!-- 消息通知 -->
|
<div class="flex_card">
|
<el-card>
|
<TidingsTable style="height: 360px" />
|
</el-card>
|
</div>
|
<!-- 地图 -->
|
</div>
|
<div style="margin-top: 10px">
|
<el-card>
|
<div>
|
<div class="search-form">
|
<el-form :model="searchForm" inline>
|
<el-form-item label=" ">
|
<el-input
|
v-model="searchForm.name"
|
clearable
|
placeholder="请输入项目名称或项目代码"
|
style="width: 180px"
|
/>
|
</el-form-item>
|
<el-form-item style="margin-right: 0px">
|
<el-button
|
icon="Search"
|
type="primary"
|
@click="searchList"
|
>搜索</el-button
|
>
|
<el-button icon="Refresh" @click="mapQuery"
|
>重置</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="map_div">
|
<Map
|
id="DangerSourceId"
|
ref="mapRef"
|
:is-show-control="true"
|
:list-type="true"
|
:map-list="tableDatas"
|
:map-type="true"
|
class="w-full h-full border-r border-[#DBDEEA]"
|
@label-click="showDetails"
|
@mark-click="showDetails"
|
@current-label-style-change="labelStyleChange"
|
/>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import SvgIcon from "@/components/SvgIcon/index.vue";
|
import ProjectOverview from "./components/projectOverview.vue";
|
import NoticeTable from "./components/noticeTable.vue";
|
import TidingsTable from "./components/tidingsTable.vue";
|
import Map from "./components/Map/index.vue";
|
import { getCalculatioln, getAbnormalData } from '@/api/login';
|
export default {
|
name: "Index",
|
data() {
|
return {
|
queryParams: {},
|
timeMerge: [],
|
sys_administrative_divisions: [],
|
countExceptionProjectData: {},
|
searchForm: {},
|
tableDatas: [
|
{
|
name: "射洪市",
|
value: 105.37281,
|
lat: 30.87145,
|
lon: 105.37281,
|
id: "222222222",
|
},
|
{
|
name: "xxxx",
|
value: 105.22332,
|
lat: 31.52421,
|
lon: 106.22332,
|
id: "11112",
|
},
|
],
|
calculation: [
|
{ text: '储', mun: 0, statistics: '', statisticsMun: '0' },
|
{ text: '建', mun: 0, statistics: '', statisticsMun: '0' },
|
{ text: '省', mun: 0, statistics: '', statisticsMun: '0' },
|
{ text: '市', mun: 0, statistics: '', statisticsMun: '0' },
|
{ text: '新', mun: 0, statistics: '', statisticsMun: '0' },
|
{ text: '竣', mun: 0, statistics: '', statisticsMun: '0' },
|
{ text: '县', mun: 0, statistics: '', statisticsMun: '0' },
|
{ text: '普', mun: 0, statistics: '', statisticsMun: '0' }
|
]
|
};
|
},
|
components: {
|
SvgIcon,
|
ProjectOverview,
|
NoticeTable,
|
TidingsTable,
|
Map,
|
},
|
created() {
|
this.handleQuery()
|
},
|
methods: {
|
dataPickerChange(val) {
|
if (!val) {
|
this.queryParams.startTime = "";
|
this.queryParams.endTime = "";
|
return;
|
}
|
|
this.queryParams.startTime = this.timeMerge[0];
|
this.queryParams.endTime = this.timeMerge[1];
|
},
|
handleQuery() {
|
console.log(this.queryParams);
|
const obj = {
|
startDate: this.queryParams.startTime,
|
endDate: this.queryParams.endTime,
|
areaCode: this.queryParams.area,
|
minInvestment: this.queryParams.start,
|
maxInvestment: this.queryParams.end,
|
};
|
|
getCalculatioln(obj).then((res) => {
|
|
const arr = res.data.proPhaseCountVO?.concat(res.data.impTypeCountVO);
|
const newArr = arr.map((item) => ({
|
text: item.text,
|
mun: item.count,
|
statistics: item.type,
|
statisticsMun: item.amount,
|
}));
|
// 创建一个对象，以便根据 text 属性快速查找 newArr 中的对象
|
const newArrLookup = newArr.reduce((lookup, item) => {
|
lookup[item.text] = item;
|
return lookup;
|
}, {});
|
|
// 更新 calculation 数组，保持其原始顺序
|
this.calculation = this.calculation.map((item) => {
|
const newItem = newArrLookup[item.text];
|
return newItem ? newItem : item; // 如果 newItem 存在，则返回 newItem，否则返回原始 item
|
});
|
|
});
|
|
this.abnormalData(obj);
|
},
|
|
// 获取异常数据
|
async abnormalData(obj) {
|
const res = await getAbnormalData(obj);
|
this.countExceptionProjectData = res.data;
|
},
|
|
//地图详情
|
showDetails(row) {
|
console.log(row);
|
},
|
|
labelStyleChange(currentLabel) {
|
if (lastLabel) {
|
lastLabel.setBackgroundColor("#fff");
|
lastLabel.setFontColor("var(--el-color-primary)");
|
}
|
currentLabel.setBackgroundColor("var(--el-color-primary)");
|
currentLabel.setFontColor("#fff");
|
lastLabel = currentLabel;
|
},
|
resetQuery() {
|
this.queryParams = {
|
area: "",
|
start: "",
|
end: "",
|
startTime: "",
|
endTime: "",
|
};
|
this.timeMerge = [];
|
this.handleQuery();
|
},
|
|
// 地图搜索
|
async searchList() {
|
// await search()
|
this.mapRef.moveTo(105.37281, 30.87145);
|
},
|
mapQuery() { },
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.home {
|
padding: 10px;
|
background-color: #f3f7fc;
|
min-height: calc(100vh - 85px);
|
overflow-x: auto;
|
|
.overview {
|
padding: 10px 0 0 10px;
|
height: 280px;
|
min-width: 1600px;
|
background-color: #fff;
|
border-radius: 6px;
|
|
.overview-top {
|
display: flex;
|
justify-content: space-between;
|
|
.title {
|
font-size: 16px;
|
}
|
|
.qurey {
|
font-size: 12px;
|
font-weight: 100;
|
}
|
}
|
}
|
|
.search-form {
|
display: flex;
|
justify-content: flex-end;
|
}
|
}
|
// ::v-deep .el-form-item {
|
// display: inline-block !important;
|
// margin-right: 10px;
|
// }
|
::v-deep .el-form-item--medium .el-form-item__content {
|
display: inline-block !important;
|
}
|
::v-deep .el-form-item__label {
|
font-size: 12px;
|
font-weight: 400;
|
}
|
|
::v-deep .el-button {
|
font-size: 12px;
|
}
|
|
::v-deep.el-input__inner {
|
font-size: 12px;
|
height: 32px;
|
}
|
|
::v-deep.el-range-input {
|
font-size: 12px;
|
}
|
|
::v-deep.el-select__placeholder {
|
font-size: 12px;
|
}
|
::v-deep input[type='number']::-webkit-inner-spin-button,
|
input[type='number']::-webkit-outer-spin-button {
|
-webkit-appearance: none;
|
margin: 0;
|
}
|
input[type='number'] {
|
-moz-appearance: textfield;
|
}
|
.search_from {
|
display: flex;
|
justify-self: justify-end;
|
gap: 10px;
|
}
|
.flex {
|
display: flex;
|
gap: 2%;
|
}
|
.flex_card {
|
width: 49%;
|
margin: 10px 0px;
|
}
|
.from_input {
|
display: flex;
|
gap: 10px;
|
font-size: 12px;
|
}
|
.map_div {
|
display: flex;
|
width: 100%;
|
height: 500px;
|
border: #dbdeea;
|
}
|
</style>
|
