| | |
| | | </el-form> |
| | | </div> |
| | | </div> |
| | | |
| | | <!-- 统计情况 --> |
| | | <ProjectOverview |
| | | :calculation="calculation" |
| | | :countExceptionProjectData="countExceptionProjectData" |
| | | /> |
| | | </div> |
| | | <!-- 代办事项 --> |
| | | <!-- <el-card>--> |
| | | <!-- <div style="display: flex;min-height: 300px">--> |
| | | <!-- <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: 360px" /> |
| | | <NoticeTable style="height: 340px" /> |
| | | </el-card> |
| | | </div> |
| | | <!-- 消息通知 --> |
| | | <div class="flex_card"> |
| | | <el-card> |
| | | <TidingsTable style="height: 360px" /> |
| | | <TidingsTable style="height: 340px" /> |
| | | </el-card> |
| | | </div> |
| | | <!-- 地图 --> |
| | | </div> |
| | | <div class="mt-[10px] min-w-[1600px]"> |
| | | <div style="margin-top: 10px"> |
| | | <el-card> |
| | | <div> |
| | | <div class="search-form"> |
| | | <el-form :model="searchForm" inline> |
| | | <el-form-item label=" "> |
| | | <el-form :model="searchForm" inline size="small"> |
| | | <el-form-item label=""> |
| | | <el-input |
| | | v-model="searchForm.name" |
| | | clearable |
| | | placeholder="请输入项目名称或项目代码" |
| | | style="width: 180px" |
| | | style="width: 240px" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item style="margin-right: 0px"> |
| | | <el-button icon="Search" type="primary" @click="searchList" |
| | | <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="flex w-full h-[500px] border border-[#DBDEEA]"> |
| | | <div class="map_div"> |
| | | <Map |
| | | id="DangerSourceId" |
| | | ref="mapRef" |
| | | :is-show-control="true" |
| | | :list-type="true" |
| | | :list-type="false" |
| | | :map-list="tableDatas" |
| | | :map-type="true" |
| | | class="w-full h-full border-r border-[#DBDEEA]" |
| | |
| | | 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: [], |
| | | calculation: [], |
| | | 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", |
| | | }, |
| | | 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" }, |
| | | ], |
| | | }; |
| | | }, |
| | |
| | | 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 = ""; |
| | |
| | | return; |
| | | } |
| | | |
| | | this.queryParams.startTime = timeMerge[0]; |
| | | this.queryParams.endTime = timeMerge[1]; |
| | | this.queryParams.startTime = this.timeMerge[0]; |
| | | this.queryParams.endTime = this.timeMerge[1]; |
| | | }, |
| | | handleQuery() { |
| | | console.log(queryParams); |
| | | const obj = { |
| | | startDate: queryParams.startTime, |
| | | endDate: queryParams.endTime, |
| | | areaCode: queryParams.area, |
| | | minInvestment: queryParams.start, |
| | | maxInvestment: queryParams.end, |
| | | startDate: this.queryParams.startTime, |
| | | endDate: this.queryParams.endTime, |
| | | areaCode: this.queryParams.area, |
| | | minInvestment: this.queryParams.start, |
| | | maxInvestment: this.queryParams.end, |
| | | }; |
| | | |
| | | this.getCalculatioln(obj).then((res) => { |
| | | getCalculatioln(obj).then((res) => { |
| | | const arr = res.data.proPhaseCountVO?.concat(res.data.impTypeCountVO); |
| | | const newArr = arr.map((item) => ({ |
| | | text: item.text, |
| | |
| | | statistics: item.type, |
| | | statisticsMun: item.amount, |
| | | })); |
| | | |
| | | // 创建一个对象,以便根据 text 属性快速查找 newArr 中的对象 |
| | | const newArrLookup = newArr.reduce((lookup, item) => { |
| | | lookup[item.text] = item; |
| | |
| | | }, {}); |
| | | |
| | | // 更新 calculation 数组,保持其原始顺序 |
| | | calculation.value = calculation.value.map((item) => { |
| | | this.calculation = this.calculation.map((item) => { |
| | | const newItem = newArrLookup[item.text]; |
| | | return newItem ? newItem : item; // 如果 newItem 存在,则返回 newItem,否则返回原始 item |
| | | }); |
| | | }); |
| | | |
| | | abnormalData(obj); |
| | | 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.timeMerge = []; |
| | | this.handleQuery(); |
| | | }, |
| | | |
| | | // 地图搜索 |
| | | async searchList() { |
| | | // await search() |
| | | this.mapRef.moveTo(105.37281, 30.87145); |
| | | }, |
| | | mapQuery() {}, |
| | | }, |
| | |
| | | } |
| | | |
| | | .search-form { |
| | | padding: 5px; |
| | | position: absolute; |
| | | z-index: 999; |
| | | display: flex; |
| | | justify-content: flex-end; |
| | | } |
| | |
| | | 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> |
| | | |