<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>
|
<el-card>
|
<div style="display: flex;">
|
<div style="flex: 2;display: flex;flex-direction: column; justify-content: center;align-items: flex-start">
|
<div class="flex justify-between mb-[15px]" style="align-items: center;margin-bottom: 5px">
|
<div class="block mb-3 font-semibold fonts">流程推进情况总览</div>
|
</div>
|
<el-table
|
:data="projectProcessData"
|
:header-cell-style="{
|
background: '#F5F7FC',
|
color: '#454B5E',
|
fontSize: '12px'
|
}"
|
min-height="280"
|
max-height="280"
|
>
|
<el-table-column
|
label="项目名称"
|
prop="name"
|
:show-overflow-tooltip="true"
|
>
|
</el-table-column>
|
<el-table-column
|
label="当前/总计"
|
width="100px"
|
prop="num"
|
>
|
</el-table-column>
|
</el-table>
|
</div>
|
<div style="flex: 1.5;display: flex;justify-content: center;align-items: center">
|
<div ref="pie" style="width: 85%; height: 100%;"></div>
|
</div>
|
<div style="flex: 2;display: flex;flex-direction: column; justify-content: center;align-items: flex-start">
|
<div style="display: flex;align-items: center;margin-bottom: 5px;width: 100%">
|
<div class="block font-semibold fonts" style="width: 100%">
|
<div style="display: flex; font-size: 12px; justify-content: flex-end;width: 100%">
|
<div
|
:class="{ active: true }"
|
class="tab"
|
>
|
准时率
|
</div>
|
<div
|
:class="{ active: false }"
|
class="tab"
|
>
|
异常率
|
</div>
|
<div
|
:class="{ active: false }"
|
class="tab"
|
>
|
办结率
|
</div>
|
</div>
|
</div>
|
</div>
|
<el-table
|
:data="projectProcessData1"
|
:header-cell-style="{
|
background: '#F5F7FC',
|
color: '#454B5E',
|
fontSize: '12px'
|
}"
|
min-height="280"
|
max-height="280"
|
>
|
<el-table-column
|
label="发布单位"
|
width="150"
|
prop="name"
|
>
|
</el-table-column>
|
<el-table-column
|
label="内容"
|
prop="content"
|
width="250"
|
:show-overflow-tooltip="true"
|
>
|
</el-table-column>
|
<el-table-column
|
label="时间"
|
prop="time"
|
>
|
</el-table-column>
|
<el-table-column
|
fixed="right"
|
align="center"
|
label="操作"
|
>
|
<template slot-scope="scope">
|
<el-button type="text" size="small">查看</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</el-card>
|
|
<!-- 待办事项 -->
|
<div class="flex">
|
<div class="flex_card">
|
<el-card>
|
<NoticeTable style="height: 340px" />
|
</el-card>
|
</div>
|
<!-- 消息通知 -->
|
<div class="flex_card">
|
<el-card>
|
<TidingsTable style="height: 340px" />
|
</el-card>
|
</div>
|
<!-- 地图 -->
|
</div>
|
<div style="margin-top: 10px">
|
<el-card>
|
<div>
|
<div class="search-form">
|
<el-form :model="searchForm" inline size="small">
|
<el-form-item label="">
|
<el-input
|
v-model="searchForm.name"
|
clearable
|
placeholder="请输入项目名称或项目代码"
|
style="width: 240px"
|
/>
|
</el-form-item>
|
<el-form-item style="margin-right: 0px">
|
<el-button
|
clearable
|
@clear="searchList"
|
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="false"
|
: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";
|
import { searchByKey } from "@/api/projectEngineering/projectInfo";
|
import * as echarts from 'echarts';
|
|
export default {
|
name: "Index",
|
data() {
|
return {
|
pie: null,
|
pieData: {},
|
projectProcessData: [
|
{
|
name: '交通类项目审批流程(简易程序)',
|
num: '11/45'
|
},
|
{
|
name: '交通类项目审批流程(一般农村公路)',
|
num: '12/15'
|
},
|
{
|
name: '交通类项目审批流程(重要农村公路)',
|
num: '16/30'
|
},
|
{
|
name: '交通类项目审批流程(国省道)',
|
num: '2/18'
|
},
|
{
|
name: '社会投资项目审批流程',
|
num: '9/16'
|
},
|
],
|
projectProcessData1: [
|
{
|
name: '射洪市人民政府',
|
content: '射洪经开区绿然幸福小区旁工地长期夜间',
|
time: '2025-01-06'
|
},
|
{
|
name: '射洪市人民政府',
|
content: '关于哨楼村拆迁 方案和 拆迁协议的疑问',
|
time: '2025-01-02'
|
},
|
{
|
name: '射洪市人民政府',
|
content: '射洪整治一下城区汽车随意乱鸣笛行为',
|
time: '2025-01-02'
|
},
|
{
|
name: '射洪市人民政府',
|
content: '维卡国际公馆开发商未按时办理房产证',
|
time: '2025-01-01'
|
}
|
],
|
queryParams: {},
|
timeMerge: [],
|
sys_administrative_divisions: [],
|
countExceptionProjectData: {},
|
searchForm: {},
|
tableDatas: [],
|
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,
|
},
|
mounted() {
|
this.$nextTick(() => {
|
this.pie = echarts.init(this.$refs.pie)
|
this.pie.setOption(this.getPieOption())
|
})
|
|
this.handleQuery();
|
this.searchList();
|
},
|
methods: {
|
getPieOption() {
|
return {
|
title: {
|
left: 'center'
|
},
|
tooltip: {
|
trigger: 'item',
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
},
|
legend: {
|
orient: 'horizontal',
|
left: 'center',
|
bottom: 1,
|
data: ['超时', '准时', '延时', '督办']
|
},
|
series: [
|
{
|
name: '饼图名称',
|
type: 'pie',
|
radius: ['50%', '70%'],
|
avoidLabelOverlap: false,
|
label: {
|
show: false,
|
position: 'center'
|
},
|
emphasis: {
|
label: {
|
show: true,
|
fontSize: '30',
|
fontWeight: 'bold'
|
}
|
},
|
labelLine: {
|
show: false
|
},
|
data: [
|
{value: 335, name: '超时'},
|
{value: 310, name: '准时'},
|
{value: 234, name: '延时'},
|
{value: 135, name: '督办'},
|
]
|
}
|
]
|
}
|
},
|
dataPickerChange(val) {
|
if (!val) {
|
this.queryParams.startTime = "";
|
this.queryParams.endTime = "";
|
return;
|
}
|
|
this.queryParams.startTime = this.timeMerge[0];
|
this.queryParams.endTime = this.timeMerge[1];
|
},
|
handleQuery() {
|
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);
|
},
|
|
// 地图搜索
|
searchList() {
|
var _this = this;
|
searchByKey({ wordKey: this.searchForm.name }).then((res) => {
|
if (res.code == 200) {
|
if (res.data.length > 0) {
|
// this.$refs["mapRef"].showProjectInfo(res.data);
|
// _this.tableDatas = res.data;
|
setTimeout(() => {
|
_this.$refs["mapRef"].makeAllMask(res.data);
|
}, 2000);
|
} else {
|
_this.$message.error("未查询到对应项目");
|
}
|
} else {
|
_this.$message.error(res.msg);
|
}
|
});
|
},
|
// 获取异常数据
|
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();
|
},
|
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 {
|
padding: 5px;
|
position: absolute;
|
z-index: 999;
|
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;
|
}
|
.tab {
|
padding: 6px;
|
border: 1px solid #dbdeea;
|
cursor: pointer;
|
width: 72px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.active {
|
border: 1px solid #3369ff;
|
color: #3369ff;
|
}
|
</style>
|
