Skip to content

D
dsk-cr20g
Commit 798456ab authored by Star970321's avatar Star970321
Browse files
Options

中铁二十局

parent f6c0a3b8
Hide whitespace changes
Inline Side-by-side
Showing with 7135 additions and 894 deletions
dsk-operate-ui/.env.development
View file @ 798456ab
# 页面标题 # 页面标题
VUE_APP_TITLE = 数字化经营履约全生命链路管理系统 VUE_APP_TITLE = 中铁二十局市场经营信息服务系统
# 开发环境配置 # 开发环境配置
ENV = 'development' ENV = 'development'
# 数字化经营履约全生命链路管理系统/开发环境 # 中铁二十局市场经营信息服务系统/开发环境
VUE_APP_BASE_API = '/prod-api' VUE_APP_BASE_API = '/prod-api'
# 路由懒加载 # 路由懒加载
...@@ -12,8 +12,8 @@ VUE_CLI_BABEL_TRANSPILE_MODULES = true ...@@ -12,8 +12,8 @@ VUE_CLI_BABEL_TRANSPILE_MODULES = true
# 子系统地址 # 子系统地址
VUE_APP_SUB_SYSTEM_ADDRESS = "https://pre-plug.jiansheku.com" # VUE_APP_SUB_SYSTEM_ADDRESS = "https://pre-plug.jiansheku.com"
# VUE_APP_SUB_SYSTEM_ADDRESS = "http://192.168.60.9:3400" VUE_APP_SUB_SYSTEM_ADDRESS = "http://192.168.60.9:3400"
# Bi大屏系统地址 # Bi大屏系统地址
VUE_APP_BI_SYSTEM_ADDRESS = "https://192.168.60.104:8001" VUE_APP_BI_SYSTEM_ADDRESS = "https://192.168.60.104:8001"
dsk-operate-ui/.env.production
View file @ 798456ab
# 页面标题 # 页面标题
VUE_APP_TITLE = 数字化经营履约全生命链路管理系统 VUE_APP_TITLE = 中铁二十局市场经营信息服务系统
# 生产环境配置 # 生产环境配置
ENV = 'production' ENV = 'production'
# 数字化经营履约全生命链路管理系统/生产环境 # 中铁二十局市场经营信息服务系统/生产环境
VUE_APP_BASE_API = 'https://szhapi.jiansheku.com' VUE_APP_BASE_API = '/prod-api'
# 子系统地址 # 子系统地址
VUE_APP_SUB_SYSTEM_ADDRESS = "https://plug.jiansheku.com" VUE_APP_SUB_SYSTEM_ADDRESS = "https://plug.jiansheku.com"
......
dsk-operate-ui/.env.staging
View file @ 798456ab
# 页面标题 # 页面标题
VUE_APP_TITLE = 数字化经营履约全生命链路管理系统 VUE_APP_TITLE = 中铁二十局市场经营信息服务系统
NODE_ENV = production NODE_ENV = production
# 测试环境配置 # 测试环境配置
ENV = 'staging' ENV = 'staging'
# 数字化经营履约全生命链路管理系统/测试环境 # 中铁二十局市场经营信息服务系统/测试环境
VUE_APP_BASE_API = '/stage-api' VUE_APP_BASE_API = '/stage-api'
dsk-operate-ui/.env.test
View file @ 798456ab
# 页面标题 # 页面标题
VUE_APP_TITLE = 数字化经营履约全生命链路管理系统 VUE_APP_TITLE = 中铁二十局市场经营信息服务系统
NODE_ENV = "production" NODE_ENV = "production"
...@@ -8,11 +8,11 @@ ENV = 'test' ...@@ -8,11 +8,11 @@ ENV = 'test'
# 数字化经营履约全生命链路管理系统/测试环境 # 中铁二十局市场经营信息服务系统/测试环境
VUE_APP_BASE_API = '/prod-api' VUE_APP_BASE_API = '/prod-api'
# 子系统地址 # 子系统地址
VUE_APP_SUB_SYSTEM_ADDRESS = "https://pre-plug.jiansheku.com" VUE_APP_SUB_SYSTEM_ADDRESS = "https://pre-plug.jiansheku.com"
# Bi大屏系统地址 # Bi大屏系统地址
VUE_APP_BI_SYSTEM_ADDRESS = "https://192.168.60.104:8001" VUE_APP_BI_SYSTEM_ADDRESS = "https://192.168.60.104:8001"
\ No newline at end of file
dsk-operate-ui/package.json
View file @ 798456ab
{ {
"name": "ruoyi", "name": "ruoyi",
"version": "3.8.5", "version": "3.8.5",
"description": "数字化经营履约全生命链路管理系统", "description": "中铁二十局市场经营信息服务系统",
"author": "若依", "author": "若依",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
......
dsk-operate-ui/public/favicon.ico
View replaced file @ f6c0a3b8 View file @ 798456ab
dsk-operate-ui/public/favicon.ico

16.6 KB | W: | H:

dsk-operate-ui/public/favicon.ico

533 Bytes | W: | H:

dsk-operate-ui/public/favicon.ico
dsk-operate-ui/public/favicon.ico
dsk-operate-ui/public/favicon.ico
dsk-operate-ui/public/favicon.ico
  • 2-up
  • Swipe
  • Onion skin
dsk-operate-ui/src/api/radar/radar.js
View file @ 798456ab
import request from '@/utils/request' import request from '@/utils/request'
// 导入客户列表 // 导入客户列表
let importData = function importData(param) { let importData = function importData(param) {
return request({ return request({
...@@ -237,6 +238,150 @@ let radarExport = function radarExport(param) { ...@@ -237,6 +238,150 @@ let radarExport = function radarExport(param) {
data: param data: param
}) })
} }
//重点项目清单查询-基础统计
let zdxmqdjctj = function zdxmqdjctj(param) {
return request({
url: '/index/zdxmqdjctj',
method: 'post',
data: param
})
}
//重点项目清单查询-前十企业
let zdxmqdtopten = function zdxmqdtopten(param) {
return request({
url: '/index/zdxmqdtopten',
method: 'post',
data: param
})
}
//重点项目清单查询-总金额统计
let zdxmqdzjetj = function zdxmqdzjetj(param) {
return request({
url: '/index/zdxmqdzjetj',
method: 'post',
data: param
})
}
//专项债项目-基础统计
let zxzxmjctj = function zxzxmjctj(param) {
return request({
url: '/index/zxzxmjctj',
method: 'post',
data: param
})
}
//专项债项目-企业统计
let zxzxmqytj = function zxzxmqytj(param) {
return request({
url: '/index/zxzxmqytj',
method: 'post',
data: param
})
}
//专项债项目-总金额统计
let zxzxmzjetj = function zxzxmzjetj(param) {
return request({
url: '/index/zxzxmzjetj',
method: 'post',
data: param
})
}
//商机-土地查询-基础维度统计
let jcwdtj = function jcwdtj(param) {
return request({
url: '/index/jcwdtj',
method: 'post',
data: param
})
}
//商机-土地查询-前十企业统计
let topten = function topten(param) {
return request({
url: '/index/topten',
method: 'post',
data: param
})
}
//商机-土地查询-总金额、总面积统计
let statisticsOfAmountAndArea = function statisticsOfAmountAndArea(param) {
return request({
url: '/index/statisticsOfAmountAndArea',
method: 'post',
data: param
})
}
//商机-拟建查询-基础维度统计
let njjcwdtj = function njjcwdtj(param) {
return request({
url: '/index/njjcwdtj',
method: 'post',
data: param
})
}
//商机-拟建查询-前十企业统计
let njtopten = function njtopten(param) {
return request({
url: '/index/njtopten',
method: 'post',
data: param
})
}
//商机-拟建查询-总金额统计
let njzjetj = function njzjetj(param) {
return request({
url: '/index/njzjetj',
method: 'post',
data: param
})
}
//商机-招标计划查询-基础维度统计
let zbjhcxjcwdtj = function zbjhcxjcwdtj(param) {
return request({
url: '/index/zbjhcxjcwdtj',
method: 'post',
data: param
})
}
//商机-招标计划查询-前十企业统计
let zbjhcxtopten = function zbjhcxtopten(param) {
return request({
url: '/index/zbjhcxtopten',
method: 'post',
data: param
})
}
//商机-招标计划查询-总金额统计
let zbjhcxzjetj = function zbjhcxzjetj(param) {
return request({
url: '/index/zbjhcxzjetj',
method: 'post',
data: param
})
}
//商机-招标公告-基础维度统计
let zbggjcwdtj = function zbggjcwdtj(param) {
return request({
url: '/index/zbggjcwdtj',
method: 'post',
data: param
})
}
//商机-招标公告-前十企业统计
let zbggtopten = function zbggtopten(param) {
return request({
url: '/index/zbggtopten',
method: 'post',
data: param
})
}
//商机-招标公告-总金额统计
let zbggzjetj = function zbggzjetj(param) {
return request({
url: '/index/zbggzjetj',
method: 'post',
data: param
})
}
export default { export default {
radarExport, radarExport,
...@@ -267,5 +412,23 @@ export default { ...@@ -267,5 +412,23 @@ export default {
jskBidTenderPage, jskBidTenderPage,
tenderDetail, tenderDetail,
tenderPage, tenderPage,
getUipIdByCid getUipIdByCid,
zdxmqdjctj,
zdxmqdtopten,
zdxmqdzjetj,
zxzxmjctj,
zxzxmqytj,
zxzxmzjetj,
jcwdtj,
topten,
statisticsOfAmountAndArea,
njjcwdtj,
njtopten,
njzjetj,
zbjhcxjcwdtj,
zbjhcxtopten,
zbjhcxzjetj,
zbggjcwdtj,
zbggtopten,
zbggzjetj,
} }
dsk-operate-ui/src/assets/styles/public.scss
View file @ 798456ab
...@@ -319,7 +319,7 @@ select { ...@@ -319,7 +319,7 @@ select {
.el-dropdown-menu .color_text { .el-dropdown-menu .color_text {
color: #1890ff; color: #1890ff;
background-color: #FFFFFF; //background-color: #FFFFFF;
} }
.el-dropdown-land .el-icon-caret-bottom { .el-dropdown-land .el-icon-caret-bottom {
...@@ -1180,7 +1180,7 @@ select { ...@@ -1180,7 +1180,7 @@ select {
.table-item-jf1 { .table-item-jf1 {
padding: 0px 16px; padding: 30px 16px;
} }
.table-item-jf1 .item-jf-img { .table-item-jf1 .item-jf-img {
......
dsk-operate-ui/src/layout/components/Sidebar/Logo.vue
View file @ 798456ab
...@@ -6,17 +6,17 @@ ...@@ -6,17 +6,17 @@
visible-arrow="true" visible-arrow="true"
trigger="hover"> trigger="hover">
<div> <div>
<img :src="logo" class="tips_logo" /> <img :src="logo2" class="tips_logo" />
<div class="tips_title">{{title}}</div> <div class="tips_title">{{title}}</div>
</div> </div>
<transition name="sidebarLogoFade" slot="reference"> <transition name="sidebarLogoFade" slot="reference">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" /> <img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1> <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}1111 </h1>
</router-link> </router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/"> <router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo" /> <img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 class="text-cl1 sidebar-title" :style="{ width: '98px', color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1> <h1 class="text-cl1 sidebar-title" :style="{ width: '98px', color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }}222 </h1>
</router-link> </router-link>
</transition> </transition>
</el-popover> </el-popover>
...@@ -24,7 +24,9 @@ ...@@ -24,7 +24,9 @@
</template> </template>
<script> <script>
import logoImg from '@/assets/images/logo/logo.png' // import logoImg from '@/assets/images/logo/logo.png'
import logoImg from '@/assets/images/logo/logo1.png'
import logoImg2 from '@/assets/images/logo/logo2.png'
import variables from '@/assets/styles/variables.scss' import variables from '@/assets/styles/variables.scss'
export default { export default {
...@@ -45,8 +47,9 @@ export default { ...@@ -45,8 +47,9 @@ export default {
}, },
data() { data() {
return { return {
title: '数字化经营履约全生命链路管理系统', title: '中铁二十局市场经营信息服务系统',
logo: logoImg logo: logoImg,
logo2: logoImg2,
} }
} }
} }
...@@ -77,8 +80,8 @@ export default { ...@@ -77,8 +80,8 @@ export default {
width: 100%; width: 100%;
& .sidebar-logo { & .sidebar-logo {
width: 16px; width: 20px;
height: 23px; /*height: 23px;*/
vertical-align: middle; vertical-align: middle;
margin-right: 3px; margin-right: 3px;
} }
......
dsk-operate-ui/src/views/radar/components/Bidding/index.vue
View file @ 798456ab
...@@ -205,9 +205,12 @@ ...@@ -205,9 +205,12 @@
<div class="bottomlist"> <div class="bottomlist">
<div class="bottomlist-title"> <div class="bottomlist-title">
<div class="bottomlist-title-left" > <div class="bottomlist-title-left" >
<p class="title-left"> <p class="title-left">
<span style="margin-right:4;color:rgba(35, 35, 35, 0.40);font-size: 18px;position: relative;top:2px;">·</span>共有{{total}}条 <span style="margin-right:4px;color:#005BBC;font-size: 22px;position: relative;top:3px;">·</span>共有<span style="color:#F56C6C;">{{total}}</span>条结果
</p> <span style="padding-left: 12px;">
合同预估总额：<span style="color:#E6A23C;">{{sumMoney}}万元</span>
</span>
</p>
</div> </div>
<div class="title-right"> <div class="title-right">
<p> <p>
...@@ -217,12 +220,28 @@ ...@@ -217,12 +220,28 @@
</div> </div>
</div> </div>
<div class="table-item-jf1" v-if="tableData.length==0&& !isSkeleton"> <div class="chart" v-if="echartsDataState === false && !isSkeleton">
<img class="item-jf-img" src="@/assets/images/kong.png" alt=""> <div class="chart-left">
<div class="item-jf-titel">抱歉，没找到相关数据！</div> <div class="echarts-item">
<div class="item-jf-text">建议调整关键词或筛选条件，重新搜索！</div> <div class="echarts-title">项目类型分布</div>
</div> <div id="echarts1" style="height: 240px"></div>
<skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton> </div>
<div class="echarts-item">
<div class="echarts-title">项目地区分布</div>
<div id="echarts2" style="height: 240px"></div>
</div>
</div>
<div class="chart-right" @click="handledialog">
更<br/>多<br/>分<br/>析<br/>
<i class="el-icon-more"></i>
</div>
</div>
<div class="table-item-jf1" v-if="tableData.length==0&& !isSkeleton">
<img class="item-jf-img" src="@/assets/images/kong.png" alt="">
<div class="item-jf-titel">抱歉，没找到相关数据！</div>
<div class="item-jf-text">建议调整关键词或筛选条件，重新搜索！</div>
</div>
<skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
<ul class="bottomlist-content" v-if="tableData.length>0&& !isSkeleton"> <ul class="bottomlist-content" v-if="tableData.length>0&& !isSkeleton">
<li class="bottomlist-list" v-for="item in tableData"> <li class="bottomlist-list" v-for="item in tableData">
<p class="list-titel"> <p class="list-titel">
...@@ -295,8 +314,31 @@ ...@@ -295,8 +314,31 @@
:total="total>limit*500?501*limit:total"> :total="total>limit*500?501*limit:total">
</el-pagination> </el-pagination>
</div> </div>
</div> </div>
<el-dialog title="招标计划宏观分析" :visible.sync="dialogEchartsVisible" width="1160px" append-to-body class="dialogEcharts" :close-on-click-modal="false">
<div class="dialog-content">
<div class="echarts-item">
<div class="echarts-title">项目类型分布</div>
<div id="echarts-xmlx" style="height: 240px"></div>
</div>
<div class="echarts-item">
<div class="echarts-title">项目地区分布</div>
<div id="echarts-xmdq" style="height: 240px"></div>
</div>
<div class="echarts-item" style="width: 100%;">
<div class="echarts-title">合同预估金额分布</div>
<div id="echarts-xmtz" style="height: 240px"></div>
</div>
<div class="echarts-item" style="width: 100%;">
<div class="echarts-title">合同预估金额前十业主</div>
<div id="echarts-tze" style="height: 240px"></div>
</div>
<div class="echarts-item" style="width: 100%;">
<div class="echarts-title">招标数量前十业主</div>
<div id="echarts-xms" style="height: 240px"></div>
</div>
</div>
</el-dialog>
</div> </div>
</template> </template>
...@@ -305,80 +347,80 @@ import jsk_data from '../../../../../public/jsk.json'; ...@@ -305,80 +347,80 @@ import jsk_data from '../../../../../public/jsk.json';
import {encodeStr} from "@/assets/js/common.js" import {encodeStr} from "@/assets/js/common.js"
import skeleton from '@/views/project/projectList/component/skeleton' import skeleton from '@/views/project/projectList/component/skeleton'
import api from '@/api/radar/radar.js'; import api from '@/api/radar/radar.js';
import * as echarts from 'echarts';
export default { export default {
name: 'Bidding', name: 'Bidding',
components:{skeleton}, components:{skeleton},
data() { data() {
return { return {
encodeStr, encodeStr,
isSkeleton:true, isSkeleton:true,
IssueTimeOptions: [ IssueTimeOptions: [
{ {
label: "不限", label: "不限",
value: "", value: "",
}, },
{ {
label: "今天", label: "今天",
value: "今天", value: "今天",
}, },
{ {
label: "近3日", label: "近3日",
value: "近3日", value: "近3日",
}, },
{ {
label: "近7日", label: "近7日",
value: "近7日", value: "近7日",
}, },
{ {
label: "近1个月", label: "近1个月",
value: "近1个月", value: "近1个月",
}, },
{ {
label: "近3个月", label: "近3个月",
value: "近3个月", value: "近3个月",
}, },
{ {
label: "近半年", label: "近半年",
value: "近半年", value: "近半年",
}, },
{ {
label: "近1年", label: "近1年",
value: "近1年", value: "近1年",
}, },
], ],
IssueTimeValue: "", IssueTimeValue: "",
IssueTime: "", IssueTime: "",
IssueTimeShowPopper: false, IssueTimeShowPopper: false,
PlanTenderDateOptions: [ PlanTenderDateOptions: [
{ {
label: "不限", label: "不限",
value: "", value: "",
}, },
{ {
label: "今天", label: "今天",
value: "今天", value: "今天",
}, },
{ {
label: "未来3天", label: "未来3天",
value: "未来3天", value: "未来3天",
}, },
{ {
label: "未来7天", label: "未来7天",
value: "未来7天", value: "未来7天",
}, },
{ {
label: "未来1个月", label: "未来1个月",
value: "未来1个月", value: "未来1个月",
}, },
{ {
label: "未来3个月", label: "未来3个月",
value: "未来3个月", value: "未来3个月",
}, },
], ],
PlanTenderDateValue: "", PlanTenderDateValue: "",
PlanTenderDate: "", PlanTenderDate: "",
PlanTenderDateShowPopper: false, PlanTenderDateShowPopper: false,
addressList: [], addressList: [],
addressType: [], addressType: [],
props: { props: {
...@@ -386,101 +428,103 @@ export default { ...@@ -386,101 +428,103 @@ export default {
expandTrigger: "hover", expandTrigger: "hover",
value: "id", value: "id",
}, },
bidPlanObjectTypeList: [],//标的物类型 bidPlanObjectTypeList: [],//标的物类型
projectTypeList: [],//项目类型 projectTypeList: [],//项目类型
tenderWayList: [],//招标方式 tenderWayList: [],//招标方式
projectCapitalSourceList: [],//资金来源 projectCapitalSourceList: [],//资金来源
planTenderAmount: [{ planTenderAmount: [
value: "不限", {
label: "不限", value: "不限",
}, label: "不限",
{ },
value: [0, 100], {
label: "100万元以下", value: [0, 100],
}, label: "100万元以下",
{ },
value: [100, 1000], {
label: "100万-1000万元", value: [100, 1000],
}, label: "100万-1000万元",
{ },
value: [1000, 5000], {
label: "1000万-5000万元", value: [1000, 5000],
}, label: "1000万-5000万元",
{ },
value: [5000, 20000], {
label: "5000万-2亿元", value: [5000, 20000],
}, label: "5000万-2亿元",
{ },
value: [20000, ""], {
label: "2亿元以上", value: [20000, ""],
}, label: "2亿元以上",
], },
],
jskBidPlanDto: { jskBidPlanDto: {
projectName:'', projectName:'',
tenderee:'', tenderee:'',
projectScale:'', projectScale:'',
province: [], province: [],
city: [], city: [],
area: [], area: [],
objectType:[], objectType:[],
projectType:[], projectType:[],
tenderWay:[], tenderWay:[],
startPlanTenderAmount:'', startPlanTenderAmount:'',
endPlanTenderAmount:'', endPlanTenderAmount:'',
projectCapitalSource:[], projectCapitalSource:[],
startIssueTime:'', startIssueTime:'',
endIssueTime:'', endIssueTime:'',
startPlanTenderDate:'', startPlanTenderDate:'',
endPlanTenderDate:'', endPlanTenderDate:'',
}, },
planTenderAmountShowPopper:false, planTenderAmountShowPopper:false,
startPlanTenderAmount:'', startPlanTenderAmount:'',
endPlanTenderAmount:'', endPlanTenderAmount:'',
domicile: [], domicile: [],
pageFlag: true, pageFlag: true,
conditionsArr: [], conditionsArr: [],
tableData:[],
tableData:[], total:0,
total:0, page:1,
page:1, limit:20,
limit:20 dialogEchartsVisible:false,
echartsData:{},
echartsDataState:false,
sumMoney:0,
}; };
}, },
computed: { computed: {
checkjskBidPlanDto() { checkjskBidPlanDto() {
let arr = []; let arr = [];
let data = {}; let data = {};
if(this.jskBidPlanDto.projectName){ if(this.jskBidPlanDto.projectName){
data = { data = {
title: "项目名称:", title: "项目名称:",
keyid: "projectName", keyid: "projectName",
value: this.jskBidPlanDto.projectName, value: this.jskBidPlanDto.projectName,
key: "projectName" key: "projectName"
} }
arr.push(data) arr.push(data)
} }
if(this.jskBidPlanDto.tenderee){ if(this.jskBidPlanDto.tenderee){
data = { data = {
title: "招标单位:", title: "招标单位:",
keyid: "tenderee", keyid: "tenderee",
value: this.jskBidPlanDto.tenderee, value: this.jskBidPlanDto.tenderee,
key: "tenderee" key: "tenderee"
} }
arr.push(data) arr.push(data)
}
if(this.jskBidPlanDto.projectScale){
data = {
title: "工程规模:",
keyid: "projectScale",
value: this.jskBidPlanDto.projectScale,
key: "projectScale"
}
arr.push(data)
} }
if(this.jskBidPlanDto.projectScale){
data = {
title: "工程规模:",
keyid: "projectScale",
value: this.jskBidPlanDto.projectScale,
key: "projectScale"
}
arr.push(data)
}
if (this.domicile.length > 0) { if (this.domicile.length > 0) {
data = { data = {
title: "项目属地:", title: "项目属地:",
...@@ -536,24 +580,23 @@ export default { ...@@ -536,24 +580,23 @@ export default {
}, },
methods: { methods: {
getCapitalSourceSelect(){ getCapitalSourceSelect(){
api.getCapitalSourceSelect().then(res=>{ api.getCapitalSourceSelect().then(res=>{
this.projectCapitalSourceList = res.data; this.projectCapitalSourceList = res.data;
}).catch(error=>{ }).catch(error=>{
}); });
}, },
searchDic(){ searchDic(){
api.searchDic().then(res=>{ api.searchDic().then(res=>{
this.bidPlanObjectTypeList= res.bidPlanObjectType,//标的物类型 this.bidPlanObjectTypeList= res.bidPlanObjectType,//标的物类型
this.projectTypeList= res.projectType,//项目类型 this.projectTypeList= res.projectType,//项目类型
this.tenderWayList= res.tenderWay;//招标方式 this.tenderWayList= res.tenderWay;//招标方式
}).catch(error=>{ }).catch(error=>{
}); });
}, },
keywordClick(val) { keywordClick(val) {
this.projectName = val this.projectName = val
}, },
search(page, limit,exportFlag) { search(page, limit,exportFlag) {
if (!page) { if (!page) {
this.page = 1; this.page = 1;
...@@ -568,10 +611,10 @@ export default { ...@@ -568,10 +611,10 @@ export default {
data.province = data.province.join(","); data.province = data.province.join(",");
data.city = data.city.join(","); data.city = data.city.join(",");
data.area = data.area.join(","); data.area = data.area.join(",");
data.objectType=data.objectType.join(","); data.objectType=data.objectType.join(",");
data.projectCapitalSource=data.projectCapitalSource.join(","); data.projectCapitalSource=data.projectCapitalSource.join(",");
data.projectType=data.projectType.join(","); data.projectType=data.projectType.join(",");
data.tenderWay=data.tenderWay.join(","); data.tenderWay=data.tenderWay.join(",");
let params = { let params = {
page: { page: {
page: this.page, page: this.page,
...@@ -590,16 +633,37 @@ export default { ...@@ -590,16 +633,37 @@ export default {
}else{ }else{
delete params.keywordNot delete params.keywordNot
} }
this.isSkeleton = true; this.isSkeleton = true;
api.jskBidPlanPage(params).then(res=>{ api.jskBidPlanPage(params).then(res=>{
this.isSkeleton = false; if (res.code==200) {
if (res.code==200) { this.tableData=res.data.list;
this.tableData=res.data.list; this.total=res.data.total;
this.total=res.data.total; }
} }).catch(error=>{
}).catch(error=>{
});
api.zbjhcxjcwdtj(params).then(res => {
this.isSkeleton = false;
if(res.code === 200 && res.data){
this.echartsData=res.data
this.initChart(res.data)
api.zbjhcxtopten(params).then(res => {
this.echartsData.topTenCompany=res.data.topTenCompany;
this.echartsData.topTenCompanyMoney=res.data.topTenCompanyMoney;
}).catch(error => {
});
}else {
this.echartsDataState=true;
}
}).catch(error => {
}); });
api.zbjhcxzjetj(params).then(res => {
this.sumMoney=res.data.sumMoney
}).catch(error => {
});
}, },
...@@ -622,313 +686,312 @@ export default { ...@@ -622,313 +686,312 @@ export default {
this.limit = limit; this.limit = limit;
this.search(this.page, limit); this.search(this.page, limit);
}, },
IssueTimehandleCommand(command) { IssueTimehandleCommand(command) {
var obj = JSON.parse(JSON.stringify(this.jskBidPlanDto)); var obj = JSON.parse(JSON.stringify(this.jskBidPlanDto));
if (command && command != "自定义") { if (command && command != "自定义") {
this.IssueTimeValue = command; this.IssueTimeValue = command;
this.$refs.IssueTimeShowPopper.hide(); this.$refs.IssueTimeShowPopper.hide();
const datetime = new Date(); const datetime = new Date();
var startTime, endTime, Year, Month, Day; var startTime, endTime, Year, Month, Day;
Year = datetime.getFullYear(); Year = datetime.getFullYear();
Month = datetime.getMonth() + 1; Month = datetime.getMonth() + 1;
Day = datetime.getDate(); Day = datetime.getDate();
switch (command) { switch (command) {
case "今天": case "今天":
startTime = Year + "-" + Month +"-" + Day; startTime = Year + "-" + Month +"-" + Day;
endTime = Year + "-" + Month + "-" + Day; endTime = Year + "-" + Month + "-" + Day;
break; break;
case "近3日": case "近3日":
endTime = Year + "-" + Month + "-" + Day; endTime = Year + "-" + Month + "-" + Day;
if (Day > 3) { if (Day > 3) {
startTime = Year + "-" + Month + "-" +(Day-3); startTime = Year + "-" + Month + "-" +(Day-3);
} else { } else {
let newTime = datetime.getTime()-3*24*60*60*1000 let newTime = datetime.getTime()-3*24*60*60*1000
Year = new Date(newTime).getFullYear(); Year = new Date(newTime).getFullYear();
Month = new Date(newTime).getMonth() + 1; Month = new Date(newTime).getMonth() + 1;
Day = new Date(newTime).getDate(); Day = new Date(newTime).getDate();
startTime = Year + "-" + Month +"-" + Day; startTime = Year + "-" + Month +"-" + Day;
} }
break; break;
case "近7日": case "近7日":
endTime = Year + "-" + Month + "-" + Day; endTime = Year + "-" + Month + "-" + Day;
if (Day > 7) { if (Day > 7) {
startTime = Year + "-" + Month + "-" +(Day-7); startTime = Year + "-" + Month + "-" +(Day-7);
} else { } else {
let newTime = datetime.getTime()-7*24*60*60*1000 let newTime = datetime.getTime()-7*24*60*60*1000
Year = new Date(newTime).getFullYear(); Year = new Date(newTime).getFullYear();
Month = new Date(newTime).getMonth() + 1; Month = new Date(newTime).getMonth() + 1;
Day = new Date(newTime).getDate(); Day = new Date(newTime).getDate();
startTime = Year + "-" + Month +"-" + Day; startTime = Year + "-" + Month +"-" + Day;
} }
break; break;
case "近1个月": case "近1个月":
endTime = Year + "-" + Month + "-" + Day; endTime = Year + "-" + Month + "-" + Day;
if (Month > 1) { if (Month > 1) {
startTime = Year + "-" + (Month - 1) + "-1"; startTime = Year + "-" + (Month - 1) + "-1";
} else { } else {
startTime = Year - 1 + "-" + (12 + Month - 1) + "-1"; startTime = Year - 1 + "-" + (12 + Month - 1) + "-1";
} }
break; break;
case "近3个月": case "近3个月":
endTime = Year + "-" + Month + "-" + Day; endTime = Year + "-" + Month + "-" + Day;
if (Month > 3) { if (Month > 3) {
startTime = Year + "-" + (Month - 3) + "-1"; startTime = Year + "-" + (Month - 3) + "-1";
} else { } else {
startTime = Year - 1 + "-" + (12 + Month - 3) + "-1"; startTime = Year - 1 + "-" + (12 + Month - 3) + "-1";
} }
break; break;
case "近半年": case "近半年":
endTime = Year + "-" + Month + "-" + Day; endTime = Year + "-" + Month + "-" + Day;
if (Month > 6) { if (Month > 6) {
startTime = Year + "-" + (Month - 6) + "-1"; startTime = Year + "-" + (Month - 6) + "-1";
} else { } else {
startTime = Year - 1 + "-" + (12 + Month - 6) + "-1"; startTime = Year - 1 + "-" + (12 + Month - 6) + "-1";
} }
break; break;
case "近1年": case "近1年":
startTime = Year - 1 + "-" + Month + "-" + Day; startTime = Year - 1 + "-" + Month + "-" + Day;
endTime = Year + "-" + Month + "-" + Day; endTime = Year + "-" + Month + "-" + Day;
break; break;
case "自定义": case "自定义":
if (!this.IssueTime) { if (!this.IssueTime) {
this.IssueTimeValue = ""; this.IssueTimeValue = "";
} }
break; break;
} }
if(startTime){ if(startTime){
var start=startTime.split('-'); var start=startTime.split('-');
startTime=start.map((item)=>{ startTime=start.map((item)=>{
if(item.length==1){ if(item.length==1){
return '0'+item return '0'+item
}else{ }else{
return item return item
} }
}) })
startTime=startTime.join('-') startTime=startTime.join('-')
} }
if(endTime){ if(endTime){
var end=endTime.split('-'); var end=endTime.split('-');
endTime=end.map((item)=>{ endTime=end.map((item)=>{
if(item.length==1){ if(item.length==1){
return '0'+item return '0'+item
}else{ }else{
return item return item
} }
}) })
endTime=endTime.join('-') endTime=endTime.join('-')
} }
obj.startIssueTime = startTime; obj.startIssueTime = startTime;
obj.endIssueTime = endTime; obj.endIssueTime = endTime;
} else if (command == "自定义") { } else if (command == "自定义") {
this.$refs.datePicker.pickerVisible = true; this.$refs.datePicker.pickerVisible = true;
} else { } else {
this.$refs.IssueTimeShowPopper.hide(); this.$refs.IssueTimeShowPopper.hide();
this.IssueTimeValue = ""; this.IssueTimeValue = "";
this.IssueTime = ""; this.IssueTime = "";
obj.startIssueTime = ""; obj.startIssueTime = "";
obj.endIssueTime = ""; obj.endIssueTime = "";
} }
this.jskBidPlanDto = obj; this.jskBidPlanDto = obj;
}, },
PlanTenderDatehandleCommand(command) { PlanTenderDatehandleCommand(command) {
var obj = JSON.parse(JSON.stringify(this.jskBidPlanDto)); var obj = JSON.parse(JSON.stringify(this.jskBidPlanDto));
if (command && command != "自定义") { if (command && command != "自定义") {
this.PlanTenderDateValue = command; this.PlanTenderDateValue = command;
this.$refs.PlanTenderDateShowPopper.hide(); this.$refs.PlanTenderDateShowPopper.hide();
const datetime = new Date(); const datetime = new Date();
var startTime, endTime, Year, Month, Day; var startTime, endTime, Year, Month, Day;
Year = datetime.getFullYear(); Year = datetime.getFullYear();
Month = datetime.getMonth() + 1; Month = datetime.getMonth() + 1;
Day = datetime.getDate(); Day = datetime.getDate();
switch (command) { switch (command) {
case "今天": case "今天":
startTime = Year + "-" + Month +"-" + Day; startTime = Year + "-" + Month +"-" + Day;
endTime = Year + "-" + Month + "-" + Day; endTime = Year + "-" + Month + "-" + Day;
break; break;
case "未来3天": case "未来3天":
startTime = Year + "-" + Month + "-" + Day; startTime = Year + "-" + Month + "-" + Day;
endTime = this.getDate(3) endTime = this.getDate(3)
break; break;
case "未来7天": case "未来7天":
startTime = Year + "-" + Month + "-" + Day; startTime = Year + "-" + Month + "-" + Day;
endTime = this.getDate(7) endTime = this.getDate(7)
break; break;
case "未来1个月": case "未来1个月":
startTime = Year + "-" + Month + "-" + Day; startTime = Year + "-" + Month + "-" + Day;
if (Month == 12) { if (Month == 12) {
endTime = Year+1 + "-01-" + + Day; endTime = Year+1 + "-01-" + + Day;
} else { } else {
endTime = Year + "-" + (Month + 1) + "-" + Day; endTime = Year + "-" + (Month + 1) + "-" + Day;
} }
break; break;
case "未来3个月": case "未来3个月":
startTime = Year + "-" + Month + "-" + Day; startTime = Year + "-" + Month + "-" + Day;
if (Month >9) { if (Month >9) {
endTime = Year+1 + "-" + Month-9 + "-" + + Day; endTime = Year+1 + "-" + Month-9 + "-" + + Day;
} else { } else {
endTime = Year + "-" + (Month + 3) + "-" + Day; endTime = Year + "-" + (Month + 3) + "-" + Day;
} }
break; break;
case "自定义": case "自定义":
if (!this.PlanTenderDate) { if (!this.PlanTenderDate) {
this.PlanTenderDateValue = ""; this.PlanTenderDateValue = "";
} }
break; break;
} }
if(startTime){ if(startTime){
var start=startTime.split('-'); var start=startTime.split('-');
startTime=start.map((item)=>{ startTime=start.map((item)=>{
if(item.length==1){ if(item.length==1){
return '0'+item return '0'+item
}else{ }else{
return item return item
} }
}) })
startTime=startTime.join('-') startTime=startTime.join('-')
} }
if(endTime){ if(endTime){
var end=endTime.split('-'); var end=endTime.split('-');
endTime=end.map((item)=>{ endTime=end.map((item)=>{
if(item.length==1){ if(item.length==1){
return '0'+item return '0'+item
}else{ }else{
return item return item
} }
}) })
endTime=endTime.join('-') endTime=endTime.join('-')
} }
obj.startPlanTenderDate = startTime; obj.startPlanTenderDate = startTime;
obj.endPlanTenderDate = endTime; obj.endPlanTenderDate = endTime;
} else if (command == "自定义") { } else if (command == "自定义") {
this.$refs.datePicker1.pickerVisible = true; this.$refs.datePicker1.pickerVisible = true;
} else { } else {
this.$refs.PlanTenderDateShowPopper.hide(); this.$refs.PlanTenderDateShowPopper.hide();
this.PlanTenderDateValue = ""; this.PlanTenderDateValue = "";
this.PlanTenderDate = ""; this.PlanTenderDate = "";
obj.startPlanTenderDate = ""; obj.startPlanTenderDate = "";
obj.endPlanTenderDate = ""; obj.endPlanTenderDate = "";
} }
this.jskBidPlanDto = obj; this.jskBidPlanDto = obj;
}, },
getDate(n){ getDate(n){
let date1 = new Date(); let date1 = new Date();
let date2 = new Date(date1); let date2 = new Date(date1);
date2.setDate(date1.getDate() + n); date2.setDate(date1.getDate() + n);
let time2 = date2.getFullYear() + "-" + ("0" + (date2.getMonth() + 1)).slice(-2) + "-" + ("0" + date2.getDate()).slice(-2); let time2 = date2.getFullYear() + "-" + ("0" + (date2.getMonth() + 1)).slice(-2) + "-" + ("0" + date2.getDate()).slice(-2);
return time2 return time2
}, },
changeIssueTime(type) { changeIssueTime(type) {
if(type=='bid'&&this.tenderDate){ if(type=='bid'&&this.tenderDate){
this.tenderDateValue = "自定义"; this.tenderDateValue = "自定义";
var obj = JSON.parse(JSON.stringify(this.jskBidPlanDto)); var obj = JSON.parse(JSON.stringify(this.jskBidPlanDto));
obj.startTenderTime = this.tenderDate[0]; obj.startTenderTime = this.tenderDate[0];
obj.endTenderTime = this.tenderDate[1]; obj.endTenderTime = this.tenderDate[1];
this.jskBidPlanDto = obj; this.jskBidPlanDto = obj;
}else if(this.IssueTime) { }else if(this.IssueTime) {
this.IssueTimeValue = "自定义"; this.IssueTimeValue = "自定义";
var obj = JSON.parse(JSON.stringify(this.jskBidPlanDto)); var obj = JSON.parse(JSON.stringify(this.jskBidPlanDto));
obj.startIssueTime = this.IssueTime[0]; obj.startIssueTime = this.IssueTime[0];
obj.endIssueTime = this.IssueTime[1]; obj.endIssueTime = this.IssueTime[1];
this.jskBidPlanDto = obj; this.jskBidPlanDto = obj;
} }
}, },
changePlanTenderDate(type) { changePlanTenderDate(type) {
if(type=='bid'&&this.tenderDate){ if(type=='bid'&&this.tenderDate){
this.tenderDateValue = "自定义"; this.tenderDateValue = "自定义";
var obj = JSON.parse(JSON.stringify(this.jskBidPlanDto)); var obj = JSON.parse(JSON.stringify(this.jskBidPlanDto));
obj.startTenderTime = this.tenderDate[0]; obj.startTenderTime = this.tenderDate[0];
obj.endTenderTime = this.tenderDate[1]; obj.endTenderTime = this.tenderDate[1];
this.jskBidPlanDto = obj; this.jskBidPlanDto = obj;
}else if(this.PlanTenderDate) { }else if(this.PlanTenderDate) {
this.PlanTenderDateValue = "自定义"; this.PlanTenderDateValue = "自定义";
var obj = JSON.parse(JSON.stringify(this.jskBidPlanDto)); var obj = JSON.parse(JSON.stringify(this.jskBidPlanDto));
obj.startPlanTenderDate = this.PlanTenderDate[0]; obj.startPlanTenderDate = this.PlanTenderDate[0];
obj.endPlanTenderDate = this.PlanTenderDate[1]; obj.endPlanTenderDate = this.PlanTenderDate[1];
this.jskBidPlanDto = obj; this.jskBidPlanDto = obj;
} }
}, },
hidePoper(type) { hidePoper(type) {
if(type=='bid'&&this.$refs.tenderDatePicker){ if(type=='bid'&&this.$refs.tenderDatePicker){
this.$refs.tenderDatePicker.pickerVisible = false; this.$refs.tenderDatePicker.pickerVisible = false;
}else if(this.$refs.datePicker){ }else if(this.$refs.datePicker){
this.$refs.datePicker.pickerVisible = false; this.$refs.datePicker.pickerVisible = false;
} }
}, },
hidePoper1(type) { hidePoper1(type) {
if(type=='bid'&&this.$refs.tenderDatePicker){ if(type=='bid'&&this.$refs.tenderDatePicker){
this.$refs.tenderDatePicker.pickerVisible = false; this.$refs.tenderDatePicker.pickerVisible = false;
}else if(this.$refs.datePicker1){ }else if(this.$refs.datePicker1){
this.$refs.datePicker1.pickerVisible = false; this.$refs.datePicker1.pickerVisible = false;
} }
}, },
mouseenter(type) { mouseenter(type) {
if(type=='bid'){ if(type=='bid'){
this.tenderDateShowPopper = true; this.tenderDateShowPopper = true;
if(this.tenderDateValue=="自定义"){ if(this.tenderDateValue=="自定义"){
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.tenderDatePicker.pickerVisible = true; this.$refs.tenderDatePicker.pickerVisible = true;
}); });
} }
}else{ }else{
this.IssueTimeShowPopper = true; this.IssueTimeShowPopper = true;
if(this.IssueTimeValue=="自定义"){ if(this.IssueTimeValue=="自定义"){
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.datePicker.pickerVisible = true; this.$refs.datePicker.pickerVisible = true;
}); });
} }
} }
}, },
mouseenter1(type) { mouseenter1(type) {
if(type=='bid'){ if(type=='bid'){
this.tenderDateShowPopper = true; this.tenderDateShowPopper = true;
if(this.tenderDateValue=="自定义"){ if(this.tenderDateValue=="自定义"){
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.tenderDatePicker.pickerVisible = true; this.$refs.tenderDatePicker.pickerVisible = true;
}); });
} }
}else{ }else{
this.PlanTenderDateShowPopper = true; this.PlanTenderDateShowPopper = true;
if(this.PlanTenderDateValue=="自定义"){ if(this.PlanTenderDateValue=="自定义"){
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.datePicker1.pickerVisible = true; this.$refs.datePicker1.pickerVisible = true;
}); });
} }
} }
}, },
clearIssueTime(type) { clearIssueTime(type) {
var obj = JSON.parse(JSON.stringify(this.jskBidPlanDto)); var obj = JSON.parse(JSON.stringify(this.jskBidPlanDto));
if(type=='bid'){ if(type=='bid'){
this.tenderDate = ""; this.tenderDate = "";
this.tenderDateValue = ""; this.tenderDateValue = "";
obj.startTenderTime = ""; obj.startTenderTime = "";
obj.endTenderTime = ""; obj.endTenderTime = "";
}else{ }else{
this.IssueTime = ""; this.IssueTime = "";
this.IssueTimeValue = ""; this.IssueTimeValue = "";
obj.startIssueTime = ""; obj.startIssueTime = "";
obj.endIssueTime = ""; obj.endIssueTime = "";
} }
this.jskBidPlanDto = obj; this.jskBidPlanDto = obj;
}, },
clearPlanTenderDate(type) { clearPlanTenderDate(type) {
var obj = JSON.parse(JSON.stringify(this.jskBidPlanDto)); var obj = JSON.parse(JSON.stringify(this.jskBidPlanDto));
if(type=='bid'){ if(type=='bid'){
this.tenderDate = ""; this.tenderDate = "";
this.tenderDateValue = ""; this.tenderDateValue = "";
obj.startTenderTime = ""; obj.startTenderTime = "";
obj.endTenderTime = ""; obj.endTenderTime = "";
}else{ }else{
this.PlanTenderDate = ""; this.PlanTenderDate = "";
this.PlanTenderDateValue = ""; this.PlanTenderDateValue = "";
obj.startPlanTenderDate = ""; obj.startPlanTenderDate = "";
obj.endPlanTenderDate = ""; obj.endPlanTenderDate = "";
} }
this.jskBidPlanDto = obj; this.jskBidPlanDto = obj;
}, },
deleteDomicile() { deleteDomicile() {
this.$refs.address.handleClear(); this.$refs.address.handleClear();
}, },
domicileChange() { domicileChange() {
let arr = this.$refs.address.getCheckedNodes(); let arr = this.$refs.address.getCheckedNodes();
let province = [], let province = [],
...@@ -998,56 +1061,56 @@ export default { ...@@ -998,56 +1061,56 @@ export default {
} }
this.addressList = str; this.addressList = str;
}, },
planTenderAmountPopperConfirm() { planTenderAmountPopperConfirm() {
if ( if (
this.startPlanTenderAmount && this.startPlanTenderAmount &&
this.endPlanTenderAmount && this.endPlanTenderAmount &&
!(Number(this.endPlanTenderAmount) > Number(this.startPlanTenderAmount)) !(Number(this.endPlanTenderAmount) > Number(this.startPlanTenderAmount))
) { ) {
return this.$message.warning("最小值必须小于最大值,请重新输入！"); return this.$message.warning("最小值必须小于最大值,请重新输入！");
} }
this.planTenderAmountShowPopper = false; this.planTenderAmountShowPopper = false;
var obj = JSON.parse(JSON.stringify(this.jskBidPlanDto)); var obj = JSON.parse(JSON.stringify(this.jskBidPlanDto));
obj.startPlanTenderAmount = this.startPlanTenderAmount; obj.startPlanTenderAmount = this.startPlanTenderAmount;
obj.endPlanTenderAmount = this.endPlanTenderAmount; obj.endPlanTenderAmount = this.endPlanTenderAmount;
this.jskBidPlanDto = obj; this.jskBidPlanDto = obj;
this.$refs.planTenderAmountShowPopper.hide(); this.$refs.planTenderAmountShowPopper.hide();
}, },
planTenderAmountCancel() { planTenderAmountCancel() {
this.planTenderAmountShowPopper = false; this.planTenderAmountShowPopper = false;
this.$refs.planTenderAmountShowPopper.hide(); this.$refs.planTenderAmountShowPopper.hide();
}, },
planTenderAmounthandleCommand(command) { planTenderAmounthandleCommand(command) {
if (command) { if (command) {
this.$refs.planTenderAmountShowPopper.hide(); this.$refs.planTenderAmountShowPopper.hide();
var obj = JSON.parse(JSON.stringify(this.jskBidPlanDto)); var obj = JSON.parse(JSON.stringify(this.jskBidPlanDto));
this.startPlanTenderAmount = ""; this.startPlanTenderAmount = "";
this.endPlanTenderAmount = ""; this.endPlanTenderAmount = "";
if (command == "不限") { if (command == "不限") {
obj.startPlanTenderAmount = ""; obj.startPlanTenderAmount = "";
obj.endPlanTenderAmount = ""; obj.endPlanTenderAmount = "";
} else { } else {
obj.startPlanTenderAmount = command[0]; obj.startPlanTenderAmount = command[0];
obj.endPlanTenderAmount = command[1]; obj.endPlanTenderAmount = command[1];
} }
this.jskBidPlanDto = obj; this.jskBidPlanDto = obj;
} }
}, },
getUipIdByCid(companyId){ getUipIdByCid(companyId){
var params=[companyId] var params=[companyId]
api.getUipIdByCid(params).then(res=>{ api.getUipIdByCid(params).then(res=>{
if (res.code==200) { if (res.code==200) {
if(res.data&&res.data.length>0&&res.data[0].uipId){ if(res.data&&res.data.length>0&&res.data[0].uipId){
this.$router.push({path: '/enterprise/'+this.encodeStr(companyId)}) this.$router.push({path: '/enterprise/'+this.encodeStr(companyId)})
}else{ }else{
this.$router.push({path: '/company/'+this.encodeStr(companyId)}) this.$router.push({path: '/company/'+this.encodeStr(companyId)})
} }
} }
}).catch(error=>{ }).catch(error=>{
}); });
}, },
reset() { reset() {
Object.assign(this.$data, this.$options.data.call(this)); //重置data Object.assign(this.$data, this.$options.data.call(this)); //重置data
this.init(); this.init();
...@@ -1056,10 +1119,408 @@ export default { ...@@ -1056,10 +1119,408 @@ export default {
init(){ init(){
this.search(); this.search();
this.addressListfn(); this.addressListfn();
this.searchDic(); this.searchDic();
this.getCapitalSourceSelect(); this.getCapitalSourceSelect();
}, },
handledialog(){
this.dialogEchartsVisible=true;
this.initChart1(this.echartsData)
},
initChart(row) {
var data=[];
for(let key in row.projectTypeList){
for(const i in row.projectTypeList[key]){
var obj={};
obj.name=i;
obj.value=row.projectTypeList[key][i];
data.push(obj)
}
}
var data1=[];
for(let key in row.provinceList){
for(const i in row.provinceList[key]){
var obj={};
obj.name=i;
obj.value=row.provinceList[key][i];
data1.push(obj)
}
}
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts1"))
let option ={
tooltip: {
trigger: 'item',
},
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '85%',
center: ['50%', '50%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart.setOption(option);
let myChart1 = echarts.init(document.getElementById("echarts2"))
let option1 ={
tooltip: {
trigger: 'item',
},
// legend: {
// type: 'scroll',
// orient: 'horizontal',
// bottom: 0,
// data: data1,
// itemHeight:8,
// itemWidth:12,
// pageButtonPosition: 'end',
// },
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '85%',
center: ['50%', '50%'],
data: data1,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart1.setOption(option1);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
myChart1.resize();//图表跟随页面大小变化宽度
});
})
},
initChart1(row) {
let data=[];
for(let key in row.projectTypeList){
for(const i in row.projectTypeList[key]){
let obj={};
obj.name=i;
obj.value=row.projectTypeList[key][i];
data.push(obj)
}
}
let data1=[];
for(let key in row.provinceList){
for(const i in row.provinceList[key]){
let obj={};
obj.name=i;
obj.value=row.provinceList[key][i];
data1.push(obj)
}
}
let data2=[]
for(let i=0; i<row.moneyRange.length; i++){
let obj={};
obj.name=row.moneyRange[i].rangeName;
obj.value=row.moneyRange[i].rate;
data2.push(obj)
}
let data3=[];
for(let key in row.topTenCompanyMoney){
for(const i in row.topTenCompanyMoney[key]){
let obj={};
obj.name=i;
obj.value=row.topTenCompanyMoney[key][i]/10000;
data3.push(obj)
}
}
let data4=[];
for(let key in row.topTenCompany){
for(const i in row.topTenCompany[key]){
let obj={};
obj.name=i;
obj.value=row.topTenCompany[key][i];
data4.push(obj)
}
}
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts-xmlx"))
let option ={
tooltip: {
trigger: 'item',
},
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart.setOption(option);
let myChart1 = echarts.init(document.getElementById("echarts-xmdq"))
let option1 ={
tooltip: {
trigger: 'item',
},
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: data1,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart1.setOption(option1);
let myChart2 = echarts.init(document.getElementById("echarts-xmtz"))
let option2 ={
tooltip: {
trigger: 'item',
},
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: data2,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart2.setOption(option2);
let myChart3 = echarts.init(document.getElementById("echarts-tze"))
let option3 ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
axisLabel: {
formatter: function (params) {
var str = ""; // 最终拼接成的字符串
var paramsLen = params.length;// 获取每项文字的个数
var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
if (paramsLen > len) { //大于设定的len就换行，不大于就不变化
for (var i = 0; i < rowNumber; i++) {
var temp = ""; // 表示每一次截取的字符串
var start = i * len; // 开始截取的位置
var end = start + len; // 结束截取的位置
if (i == rowNumber - 1) { // 最后一次不换行
temp = params.substring(start, paramsLen);
} else { // 每一次拼接字符串并换行
temp = params.substring(start, end) + "\n";
}
str += temp; // 最终拼成的字符串
}
} else { // 给新的字符串赋值
str = params;
}
return str; //返回字符串
}
},
axisTick: false, //坐标轴刻度
axisPointer: {
type: 'shadow'
},
data: data3.map(item => item.name),
},
yAxis: [
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位：亿元',
nameLocation: 'end',
nameTextStyle: {
padding: [0, 10, 0, -30], // 四个数字分别为上右下左与原位置距离
color: '#666666',
}
},
],
grid: {
top:40,
left:60,
right:20,
bottom:70,
},
series: [
{
name:'项目金额',
type: 'bar',
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#E49708'
}, {
offset: 1,
color: '#E49708'
}]),
// barBorderRadius:[20,20, 0, 0]
}
},
data:data3.map(item => item.value),
}
]
}
myChart3.setOption(option3);
let myChart4 = echarts.init(document.getElementById("echarts-xms"))
let option4 ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
axisLabel: {
formatter: function (params) {
var str = ""; // 最终拼接成的字符串
var paramsLen = params.length;// 获取每项文字的个数
var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
if (paramsLen > len) { //大于设定的len就换行，不大于就不变化
for (var i = 0; i < rowNumber; i++) {
var temp = ""; // 表示每一次截取的字符串
var start = i * len; // 开始截取的位置
var end = start + len; // 结束截取的位置
if (i == rowNumber - 1) { // 最后一次不换行
temp = params.substring(start, paramsLen);
} else { // 每一次拼接字符串并换行
temp = params.substring(start, end) + "\n";
}
str += temp; // 最终拼成的字符串
}
} else { // 给新的字符串赋值
str = params;
}
return str; //返回字符串
}
},
axisTick: false, //坐标轴刻度
axisPointer: {
type: 'shadow'
},
data: data4.map(item => item.name),
},
yAxis: [
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位：个',
nameLocation: 'end',
nameTextStyle: {
padding: [0, 10, 0, -30], // 四个数字分别为上右下左与原位置距离
color: '#666666',
}
},
],
grid: {
top:40,
left:60,
right:20,
bottom:50,
},
series: [
{
name:'项目数量',
type: 'bar',
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#E49708'
}, {
offset: 1,
color: '#E49708'
}]),
// barBorderRadius:[20,20, 0, 0]
}
},
data:data4.map(item => item.value),
}
]
}
myChart4.setOption(option4);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
myChart1.resize();//图表跟随页面大小变化宽度
myChart2.resize();//图表跟随页面大小变化宽度
myChart3.resize();//图表跟随页面大小变化宽度
myChart4.resize();//图表跟随页面大小变化宽度
});
})
},
}, },
}; };
</script> </script>
...@@ -1315,8 +1776,66 @@ export default { ...@@ -1315,8 +1776,66 @@ export default {
float: right; float: right;
} }
} }
}
.chart{
height: 306px;
display: flex;
margin: 16px 20px;
width: calc(100% - 40px);
.chart-left{
height: 306px;
border: 1px solid #EFEFEF;
border-radius: 4px;
width: calc(100% - 74px);
display: flex;
.echarts-title{
color: #303133;
font-size: 14px;
font-weight: 700;
padding-bottom: 14px;
}
.echarts-item{
width: calc(50% - 16px);
padding: 16px 0 16px 16px;
}
}
.chart-right{
height: 306px;
border-radius: 8px;
border: 1px solid #1373D9;
color: #1373D9;
text-align: center;
font-size: 14px;
padding-top: 103px;
cursor: pointer;
margin-left: 16px;
width: 56px;
}
.chart-right:hover{
background: #E8F1FC;
}
}
}
.dialogEcharts{
::v-deep .el-dialog {
.el-dialog__body{
padding: 16px 19px 0 16px;
max-height: 664px;
overflow: auto;
}
.echarts-item{
border: 1px solid #DCDFE6;
width: 550px;
display: inline-block;
border-radius: 4px;
padding: 16px;
margin-bottom: 16px;
}
.echarts-item:nth-child(2){
margin-left: 16px;
}
}
}
</style> </style>
dsk-operate-ui/src/views/radar/components/Establishment/index.vue
View file @ 798456ab
...@@ -176,9 +176,12 @@ ...@@ -176,9 +176,12 @@
<div class="bottomlist"> <div class="bottomlist">
<div class="bottomlist-title"> <div class="bottomlist-title">
<div class="bottomlist-title-left" > <div class="bottomlist-title-left" >
<p class="title-left"> <p class="title-left">
<span style="margin-right:4;color:rgba(35, 35, 35, 0.40);font-size: 18px;position: relative;top:2px;">·</span>共有{{total}}条 <span style="margin-right:4px;color:#005BBC;font-size: 22px;position: relative;top:3px;">·</span>共有<span style="color:#F56C6C;">{{total}}</span>条结果
</p> <span style="padding-left: 12px;">
项目投资总额：<span style="color:#E6A23C;">{{sumMoney}}万元</span>
</span>
</p>
</div> </div>
<div class="title-right"> <div class="title-right">
<p> <p>
...@@ -188,6 +191,22 @@ ...@@ -188,6 +191,22 @@
</div> </div>
</div> </div>
<div class="chart" v-if="echartsDataState === false && !isSkeleton">
<div class="chart-left">
<div class="echarts-item">
<div class="echarts-title">项目类型分布</div>
<div id="echarts1" style="height: 240px"></div>
</div>
<div class="echarts-item">
<div class="echarts-title">项目地区分布</div>
<div id="echarts2" style="height: 240px"></div>
</div>
</div>
<div class="chart-right" @click="handledialog">
更<br/>多<br/>分<br/>析<br/>
<i class="el-icon-more"></i>
</div>
</div>
<div class="table-item-jf1" v-if="tableData.length==0&& !isSkeleton"> <div class="table-item-jf1" v-if="tableData.length==0&& !isSkeleton">
<img class="item-jf-img" src="@/assets/images/kong.png" alt=""> <img class="item-jf-img" src="@/assets/images/kong.png" alt="">
<div class="item-jf-titel">抱歉，没找到相关数据！</div> <div class="item-jf-titel">抱歉，没找到相关数据！</div>
...@@ -269,6 +288,30 @@ ...@@ -269,6 +288,30 @@
</div> </div>
<el-dialog title="拟建项目宏观分析" :visible.sync="dialogEchartsVisible" width="1160px" append-to-body class="dialogEcharts" :close-on-click-modal="false">
<div class="dialog-content">
<div class="echarts-item">
<div class="echarts-title">项目类型分布</div>
<div id="echarts-xmlx" style="height: 240px"></div>
</div>
<div class="echarts-item">
<div class="echarts-title">项目地区分布</div>
<div id="echarts-xmdq" style="height: 240px"></div>
</div>
<div class="echarts-item" style="width: 100%;">
<div class="echarts-title">项目投资额分布</div>
<div id="echarts-xmtz" style="height: 240px"></div>
</div>
<div class="echarts-item" style="width: 100%;">
<div class="echarts-title">投资额前十业主</div>
<div id="echarts-tze" style="height: 240px"></div>
</div>
<div class="echarts-item" style="width: 100%;">
<div class="echarts-title">项目数前十业主</div>
<div id="echarts-xms" style="height: 240px"></div>
</div>
</div>
</el-dialog>
</div> </div>
...@@ -279,6 +322,7 @@ ...@@ -279,6 +322,7 @@
import {encodeStr} from "@/assets/js/common.js" import {encodeStr} from "@/assets/js/common.js"
import skeleton from '@/views/project/projectList/component/skeleton' import skeleton from '@/views/project/projectList/component/skeleton'
import api from '@/api/radar/radar.js'; import api from '@/api/radar/radar.js';
import * as echarts from 'echarts';
export default { export default {
name: 'Establishment', name: 'Establishment',
components:{skeleton}, components:{skeleton},
...@@ -328,7 +372,8 @@ ...@@ -328,7 +372,8 @@
}, },
], ],
moneyOptions: [{ moneyOptions: [
{
value: "不限", value: "不限",
label: "不限", label: "不限",
}, },
...@@ -353,7 +398,8 @@ ...@@ -353,7 +398,8 @@
label: "2亿元以上", label: "2亿元以上",
}, },
], ],
handleTimeOptions: [{ handleTimeOptions: [
{
label: "不限", label: "不限",
value: "", value: "",
}, },
...@@ -441,14 +487,16 @@ ...@@ -441,14 +487,16 @@
planEndTimeShowPopper: false, planEndTimeShowPopper: false,
pageFlag: true, pageFlag: true,
conditionsArr: [], conditionsArr: [],
tableData:[], tableData:[],
total:0, total:0,
page:1, page:1,
limit:20 limit:20,
dialogEchartsVisible:false,
echartsData:{},
echartsDataState:false,
sumMoney:0,
}; };
}, },
computed: { computed: {
checkEstablishmentDto() { checkEstablishmentDto() {
let arr = []; let arr = [];
...@@ -569,9 +617,6 @@ ...@@ -569,9 +617,6 @@
}, },
mounted() { mounted() {
this.init(); this.init();
}, },
methods: { methods: {
searchDic(){ searchDic(){
...@@ -642,7 +687,6 @@ ...@@ -642,7 +687,6 @@
}; };
this.isSkeleton = true; this.isSkeleton = true;
api.establishmentPage(params).then(res=>{ api.establishmentPage(params).then(res=>{
this.isSkeleton = false;
if (res.code==200) { if (res.code==200) {
this.tableData=res.data.list; this.tableData=res.data.list;
this.total=res.data.total; this.total=res.data.total;
...@@ -650,6 +694,29 @@ ...@@ -650,6 +694,29 @@
}).catch(error=>{ }).catch(error=>{
}); });
api.njjcwdtj(params).then(res => {
this.isSkeleton = false;
if(res.code === 200 && res.data){
this.echartsData=res.data
this.initChart(res.data)
api.njtopten(params).then(res => {
this.echartsData.topTenCompany=res.data.topTenCompany;
this.echartsData.topTenCompanyMoney=res.data.topTenCompanyMoney;
}).catch(error => {
});
}else {
this.echartsDataState=true;
}
}).catch(error => {
});
api.njzjetj(params).then(res => {
this.sumMoney=res.data.sumMoney
}).catch(error => {
});
}, },
...@@ -1114,7 +1181,7 @@ ...@@ -1114,7 +1181,7 @@
} }
return ckhasValue; return ckhasValue;
}, },
hasValueThroughObj(times,param,excludeKeys,excludeValues){ hasValueThroughObj(times,param,excludeKeys,excludeValues){
if(times==0){ if(times==0){
this.hasValue=false; this.hasValue=false;
...@@ -1154,7 +1221,415 @@ ...@@ -1154,7 +1221,415 @@
} }
} }
return this.hasValue; return this.hasValue;
}, },
handledialog(){
this.dialogEchartsVisible=true;
this.initChart1(this.echartsData)
},
initChart(row) {
var data=[];
for(let key in row.projectTypeList){
for(const i in row.projectTypeList[key]){
var obj={};
obj.name=i;
obj.value=row.projectTypeList[key][i];
data.push(obj)
}
}
var data1=[];
for(let key in row.provinceList){
for(const i in row.provinceList[key]){
var obj={};
obj.name=i;
obj.value=row.provinceList[key][i];
data1.push(obj)
}
}
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts1"))
let option ={
tooltip: {
trigger: 'item',
},
// legend: {
// type: 'scroll',
// orient: 'horizontal',
// bottom: 0,
// data: data,
// itemHeight:8,
// itemWidth:12,
// pageButtonPosition: 'end',
// },
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '85%',
center: ['50%', '50%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart.setOption(option);
let myChart1 = echarts.init(document.getElementById("echarts2"))
let option1 ={
tooltip: {
trigger: 'item',
},
// legend: {
// type: 'scroll',
// orient: 'horizontal',
// bottom: 0,
// data: data1,
// itemHeight:8,
// itemWidth:12,
// pageButtonPosition: 'end',
// },
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '85%',
center: ['50%', '50%'],
data: data1,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart1.setOption(option1);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
myChart1.resize();//图表跟随页面大小变化宽度
});
})
},
initChart1(row) {
let data=[];
for(let key in row.projectTypeList){
for(const i in row.projectTypeList[key]){
let obj={};
obj.name=i;
obj.value=row.projectTypeList[key][i];
data.push(obj)
}
}
let data1=[];
for(let key in row.provinceList){
for(const i in row.provinceList[key]){
let obj={};
obj.name=i;
obj.value=row.provinceList[key][i];
data1.push(obj)
}
}
let data2=[]
for(let i=0; i<row.moneyRange.length; i++){
let obj={};
obj.name=row.moneyRange[i].rangeName;
obj.value=row.moneyRange[i].rate;
data2.push(obj)
}
let data3=[];
for(let key in row.topTenCompanyMoney){
for(const i in row.topTenCompanyMoney[key]){
let obj={};
obj.name=i;
obj.value=row.topTenCompanyMoney[key][i]/10000;
data3.push(obj)
}
}
let data4=[];
for(let key in row.topTenCompany){
for(const i in row.topTenCompany[key]){
let obj={};
obj.name=i;
obj.value=row.topTenCompany[key][i];
data4.push(obj)
}
}
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts-xmlx"))
let option ={
tooltip: {
trigger: 'item',
},
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart.setOption(option);
let myChart1 = echarts.init(document.getElementById("echarts-xmdq"))
let option1 ={
tooltip: {
trigger: 'item',
},
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: data1,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart1.setOption(option1);
let myChart2 = echarts.init(document.getElementById("echarts-xmtz"))
let option2 ={
tooltip: {
trigger: 'item',
},
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: data2,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart2.setOption(option2);
let myChart3 = echarts.init(document.getElementById("echarts-tze"))
let option3 ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
axisLabel: {
formatter: function (params) {
var str = ""; // 最终拼接成的字符串
var paramsLen = params.length;// 获取每项文字的个数
var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
if (paramsLen > len) { //大于设定的len就换行，不大于就不变化
for (var i = 0; i < rowNumber; i++) {
var temp = ""; // 表示每一次截取的字符串
var start = i * len; // 开始截取的位置
var end = start + len; // 结束截取的位置
if (i == rowNumber - 1) { // 最后一次不换行
temp = params.substring(start, paramsLen);
} else { // 每一次拼接字符串并换行
temp = params.substring(start, end) + "\n";
}
str += temp; // 最终拼成的字符串
}
} else { // 给新的字符串赋值
str = params;
}
return str; //返回字符串
}
},
axisTick: false, //坐标轴刻度
axisPointer: {
type: 'shadow'
},
data: data3.map(item => item.name),
},
yAxis: [
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位：亿元',
nameLocation: 'end',
nameTextStyle: {
padding: [0, 10, 0, -30], // 四个数字分别为上右下左与原位置距离
color: '#666666',
}
},
],
grid: {
top:40,
left:60,
right:20,
bottom:50,
},
series: [
{
name:'项目金额',
type: 'bar',
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#E49708'
}, {
offset: 1,
color: '#E49708'
}]),
// barBorderRadius:[20,20, 0, 0]
}
},
data:data3.map(item => item.value),
}
]
}
myChart3.setOption(option3);
let myChart4 = echarts.init(document.getElementById("echarts-xms"))
let option4 ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
axisLabel: {
formatter: function (params) {
var str = ""; // 最终拼接成的字符串
var paramsLen = params.length;// 获取每项文字的个数
var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
if (paramsLen > len) { //大于设定的len就换行，不大于就不变化
for (var i = 0; i < rowNumber; i++) {
var temp = ""; // 表示每一次截取的字符串
var start = i * len; // 开始截取的位置
var end = start + len; // 结束截取的位置
if (i == rowNumber - 1) { // 最后一次不换行
temp = params.substring(start, paramsLen);
} else { // 每一次拼接字符串并换行
temp = params.substring(start, end) + "\n";
}
str += temp; // 最终拼成的字符串
}
} else { // 给新的字符串赋值
str = params;
}
return str; //返回字符串
}
},
axisTick: false, //坐标轴刻度
axisPointer: {
type: 'shadow'
},
data: data4.map(item => item.name),
},
yAxis: [
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位：个',
nameLocation: 'end',
nameTextStyle: {
padding: [0, 10, 0, -30], // 四个数字分别为上右下左与原位置距离
color: '#666666',
}
},
],
grid: {
top:40,
left:60,
right:20,
bottom:50,
},
series: [
{
name:'项目数量',
type: 'bar',
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#E49708'
}, {
offset: 1,
color: '#E49708'
}]),
// barBorderRadius:[20,20, 0, 0]
}
},
data:data4.map(item => item.value),
}
]
}
myChart4.setOption(option4);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
myChart1.resize();//图表跟随页面大小变化宽度
myChart2.resize();//图表跟随页面大小变化宽度
myChart3.resize();//图表跟随页面大小变化宽度
myChart4.resize();//图表跟随页面大小变化宽度
});
})
},
}, },
}; };
</script> </script>
...@@ -1246,8 +1721,7 @@ ...@@ -1246,8 +1721,7 @@
.bottomlist{ .bottomlist{
width: 100%; width: 100%;
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
.bottomlist-title{ .bottomlist-title{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -1403,7 +1877,66 @@ ...@@ -1403,7 +1877,66 @@
float: right; float: right;
} }
} }
}
.chart{
height: 306px;
display: flex;
margin: 16px 20px;
width: calc(100% - 40px);
.chart-left{
height: 306px;
border: 1px solid #EFEFEF;
border-radius: 4px;
width: calc(100% - 74px);
display: flex;
.echarts-title{
color: #303133;
font-weight: 700;
font-size: 14px;
padding-bottom: 14px;
}
.echarts-item{
width: calc(50% - 16px);
padding: 16px 0 16px 16px;
}
}
.chart-right{
height: 306px;
border-radius: 8px;
border: 1px solid #1373D9;
color: #1373D9;
text-align: center;
font-size: 14px;
padding-top: 103px;
cursor: pointer;
margin-left: 16px;
width: 56px;
}
.chart-right:hover{
background: #E8F1FC;
}
}
}
.dialogEcharts{
::v-deep .el-dialog {
.el-dialog__body{
padding: 16px 19px 0 16px;
max-height: 664px;
overflow: auto;
}
.echarts-item{
border: 1px solid #DCDFE6;
width: 550px;
display: inline-block;
border-radius: 4px;
padding: 16px;
margin-bottom: 16px;
}
.echarts-item:nth-child(2){
margin-left: 16px;
}
}
}
</style> </style>
dsk-operate-ui/src/views/radar/components/Land/index.vue
View file @ 798456ab
<template> <template>
<div> <div class="land-container">
<div class="content"> <div class="content">
<div class="content_item content_item_padding0"> <div class="content_item content_item_padding0">
<div class="label">项目名称</div> <div class="label">项目名称</div>
...@@ -199,110 +199,147 @@ ...@@ -199,110 +199,147 @@
</div> </div>
</div> </div>
</div> </div>
<div class="bottomlist">
<div class="bottomlist-title">
<div class="bottomlist-title-left" >
<p class="title-left">
<span style="margin-right:4px;color:#005BBC;font-size: 22px;position: relative;top:3px;">·</span>共有<span style="color:#F56C6C;">{{total}}</span>条结果
<span style="padding-left: 12px;">
土地成交总额：<span style="color:#E6A23C;padding-right: 6px;">{{sumMoney}}万元</span>
土地成交总面积：<span style="color:#E6A23C;">{{sumArea}}m²</span>
</span>
</p>
<el-popover v-model="fieldshow" placement="bottom-start" trigger="click"
popper-class="viewlist-el-popover">
<ul class="pup_list pup_zhclist">
<li v-for="(itme,i) in fieldOptions" :class="itme.status?'active':''"
@click="handsequencingList(i)" :key="i">
{{itme.value}}
</li>
</ul>
<span slot="reference" class="toolbar-right-download" >
{{fieldText}}<i class="el-icon-arrow-down"
:style="{transform:fieldshow?'rotate(180deg)':''}"></i>
</span>
</el-popover>
</div>
<div class="title-right">
<p>
<img src="@/assets/images/EXCEL.png" alt="">
<span class="excel" @click="$message({message: '功能正在开发中',type: 'warning'})">导出EXCEL</span>
</p>
</div>
<div class="bottomlist"> </div>
<div class="bottomlist-title"> <div class="chart" v-if="echartsDataState === false && !isSkeleton">
<div class="bottomlist-title-left" > <div class="chart-left">
<p class="title-left"> <div class="echarts-item">
<span style="margin-right:4;color:rgba(35, 35, 35, 0.40);font-size: 18px;position: relative;top:2px;">·</span>共有{{total}}条 <div class="echarts-title">土地用途分布</div>
</p> <div id="echarts1" style="height: 240px"></div>
<el-popover v-model="fieldshow" placement="bottom-start" trigger="click" </div>
popper-class="viewlist-el-popover"> <div class="echarts-item">
<ul class="pup_list pup_zhclist"> <div class="echarts-title">交易地区分布</div>
<li v-for="(itme,i) in fieldOptions" :class="itme.status?'active':''" <div id="echarts2" style="height: 240px"></div>
@click="handsequencingList(i)" :key="i"> </div>
{{itme.value}} </div>
</li> <div class="chart-right" @click="handledialog">
</ul> 更<br/>多<br/>分<br/>析<br/>
<span slot="reference" class="toolbar-right-download" > <i class="el-icon-more"></i>
{{fieldText}}<i class="el-icon-arrow-down" </div>
:style="{transform:fieldshow?'rotate(180deg)':''}"></i> </div>
</span> <div class="table-item-jf1" v-if="tableData.length==0&& !isSkeleton">
</el-popover> <img class="item-jf-img" src="@/assets/images/kong.png" alt="">
</div> <div class="item-jf-titel">抱歉，没找到相关数据！</div>
<div class="title-right"> <div class="item-jf-text">建议调整关键词或筛选条件，重新搜索！</div>
<p> </div>
<img src="@/assets/images/EXCEL.png" alt=""> <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
<span class="excel" @click="$message({message: '功能正在开发中',type: 'warning'})">导出EXCEL</span> <ul class="bottomlist-content" v-if="tableData.length>0&& !isSkeleton">
</p> <li class="bottomlist-list" v-for="item in tableData">
</div> <p class="list-titel">
<router-link :to="'/radar/Land/details/'+ item.id" tag="a" class="list-titel-a" v-html="item.projectName"></router-link>
</div> </p>
<div class="table-item-jf1" v-if="tableData.length==0&& !isSkeleton">
<img class="item-jf-img" src="@/assets/images/kong.png" alt="">
<div class="item-jf-titel">抱歉，没找到相关数据！</div>
<div class="item-jf-text">建议调整关键词或筛选条件，重新搜索！</div>
</div>
<skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
<ul class="bottomlist-content" v-if="tableData.length>0&& !isSkeleton">
<li class="bottomlist-list" v-for="item in tableData">
<p class="list-titel">
<router-link :to="'/radar/Land/details/'+ item.id" tag="a" class="list-titel-a" v-html="item.projectName"></router-link>
</p>
<div class="list-content" v-if="item.companyName||item.transactionPrice||item.acreage||item.acreage">
<p class="list-content-text" v-if="item.companyName">
<span>受让人：</span>
<span v-if="item.companyId">
<span class="blue" @click="getUipIdByCid(item.companyId)" v-html="item.companyName"></span>
</span>
<span v-else v-html="item.companyName">
</span>
</p> <div class="list-content" v-if="item.companyName||item.transactionPrice||item.acreage||item.acreage">
<p class="list-content-text" v-if="item.transactionPrice"> <p class="list-content-text" v-if="item.companyName">
<span>成交金额：</span> <span>受让人：</span>
<span>{{item.transactionPrice||'--'}}万元</span> <span v-if="item.companyId">
</p> <span class="blue" @click="getUipIdByCid(item.companyId)" v-html="item.companyName"></span>
<p class="list-content-text" v-if="item.acreage"> </span>
<span>总面积：</span> <span v-else v-html="item.companyName">
<span>{{item.acreage||'--'}}㎡</span> </span>
</p>
<p class="list-content-text" v-if="item.contractSignTime">
<span>合同签订：</span>
<span>{{item.contractSignTime||'--'}}</span>
</p>
</div>
<div class="list-content" v-if="item.landUse||item.industry||item.supplyLandWay">
<p class="list-content-text" v-if="item.landUse">
<span>土地用途：</span>
<span >{{item.landUse||'--'}}</span>
</p>
<p class="list-content-text" v-if="item.industry">
<span>行业分类：</span>
<span >{{item.industry||'--'}}</span>
</p>
<p class="list-content-text" v-if="item.supplyLandWay">
<span>供应方式：</span>
<span >{{item.supplyLandWay||'--'}}</span>
</p>
</div>
<div class="list-content list-addree" v-if="item.province||item.city||item.area||item.landAddr">
<img src="@/assets/images/addree.png" alt="">
<p class="list-content-text" v-if="item.province||item.city||item.area">
<span>行政区划：</span>
<span >{{item.province}}<template v-if="item.city">-{{item.city}}</template><template v-if="item.area">-{{item.area}}</template></span>
</p>
<p class="list-content-text" v-if="item.landAddr">
<span>土地坐落：</span>
<span v-html="item.landAddr"></span>
</p>
</div>
</li>
</ul>
<div class="pagination clearfix" v-if="total>0&&pageFlag">
<el-pagination
background
:page-size="pageSize"
:current-page="page"
@current-change="handleCurrentChange"
layout="prev, pager, next"
:total="total>limit*500?501*limit:total">
</el-pagination>
</div>
</div>
</p>
<p class="list-content-text" v-if="item.transactionPrice">
<span>成交金额：</span>
<span>{{item.transactionPrice||'--'}}万元</span>
</p>
<p class="list-content-text" v-if="item.acreage">
<span>总面积：</span>
<span>{{item.acreage||'--'}}㎡</span>
</p>
<p class="list-content-text" v-if="item.contractSignTime">
<span>合同签订：</span>
<span>{{item.contractSignTime||'--'}}</span>
</p>
</div>
<div class="list-content" v-if="item.landUse||item.industry||item.supplyLandWay">
<p class="list-content-text" v-if="item.landUse">
<span>土地用途：</span>
<span >{{item.landUse||'--'}}</span>
</p>
<p class="list-content-text" v-if="item.industry">
<span>行业分类：</span>
<span >{{item.industry||'--'}}</span>
</p>
<p class="list-content-text" v-if="item.supplyLandWay">
<span>供应方式：</span>
<span >{{item.supplyLandWay||'--'}}</span>
</p>
</div>
<div class="list-content list-addree" v-if="item.province||item.city||item.area||item.landAddr">
<img src="@/assets/images/addree.png" alt="">
<p class="list-content-text" v-if="item.province||item.city||item.area">
<span>行政区划：</span>
<span >{{item.province}}<template v-if="item.city">-{{item.city}}</template><template v-if="item.area">-{{item.area}}</template></span>
</p>
<p class="list-content-text" v-if="item.landAddr">
<span>土地坐落：</span>
<span v-html="item.landAddr"></span>
</p>
</div>
</li>
</ul>
<div class="pagination clearfix" v-if="total>0&&pageFlag">
<el-pagination
background
:page-size="pageSize"
:current-page="page"
@current-change="handleCurrentChange"
layout="prev, pager, next"
:total="total>limit*500?501*limit:total">
</el-pagination>
</div>
</div>
<el-dialog title="土地交易宏观分析" :visible.sync="dialogEchartsVisible" width="1160px" append-to-body class="dialogEcharts" :close-on-click-modal="false">
<div class="dialog-content">
<div class="echarts-item">
<div class="echarts-title">土地用途分布</div>
<div id="echarts-td" style="height: 240px"></div>
</div>
<div class="echarts-item">
<div class="echarts-title">交易地区分布</div>
<div id="echarts-jy" style="height: 240px"></div>
</div>
<div class="echarts-item" style="width: 100%;">
<div class="echarts-title">受让面积前十业主</div>
<div id="echarts-tze" style="height: 240px"></div>
</div>
<div class="echarts-item" style="width: 100%;">
<div class="echarts-title">受让土地数前十业主</div>
<div id="echarts-xms" style="height: 240px"></div>
</div>
</div>
</el-dialog>
</div> </div>
</template> </template>
...@@ -311,6 +348,7 @@ ...@@ -311,6 +348,7 @@
import skeleton from '@/views/project/projectList/component/skeleton' import skeleton from '@/views/project/projectList/component/skeleton'
import api from '@/api/radar/radar.js'; import api from '@/api/radar/radar.js';
import jsk_data from '../../../../../public/jsk.json'; import jsk_data from '../../../../../public/jsk.json';
import * as echarts from 'echarts';
export default { export default {
name: 'Land', name: 'Land',
components:{skeleton}, components:{skeleton},
...@@ -334,7 +372,8 @@ ...@@ -334,7 +372,8 @@
fieldshow: false, fieldshow: false,
fieldText: '默认排序', fieldText: '默认排序',
field: '', //查询结果排序方式 field: '', //查询结果排序方式
fieldOptions: [{ fieldOptions: [
{
key: "contractSignTime", key: "contractSignTime",
value: "默认排序", value: "默认排序",
status: true, status: true,
...@@ -412,7 +451,8 @@ ...@@ -412,7 +451,8 @@
label: "2亿元以上", label: "2亿元以上",
}, },
], ],
contractSignTimeOptions: [{ contractSignTimeOptions: [
{
label: "不限", label: "不限",
value: "", value: "",
}, },
...@@ -465,33 +505,15 @@ ...@@ -465,33 +505,15 @@
contractSignTime: "", contractSignTime: "",
contractSignTimeShowPopper: false, contractSignTimeShowPopper: false,
pageFlag: true, pageFlag: true,
showList:true, showList:true,
fieldshow: false,
fieldText: '默认排序',
field: '', //查询结果排序方式
fieldOptions: [
{
key: "contractSignTime",
value: "默认排序",
status: true,
},
{
key: "transactionPrice",
value: "成交金额从大到小",
status: false,
},
{
key: "acreage",
value: "出让面积从大到小",
status: false,
},
],
tableData:[], tableData:[],
total:0, total:0,
page:1, pageSize:20,
pageSize:20 dialogEchartsVisible:false,
echartsData:{},
echartsDataState:false,
sumMoney:0,
sumArea:0,
}; };
}, },
...@@ -615,7 +637,6 @@ ...@@ -615,7 +637,6 @@
}; };
this.isSkeleton = true; this.isSkeleton = true;
api.landMarketPage(params).then(res=>{ api.landMarketPage(params).then(res=>{
this.isSkeleton = false;
if (res.code==200) { if (res.code==200) {
this.tableData=res.data.list; this.tableData=res.data.list;
this.total=res.data.total; this.total=res.data.total;
...@@ -624,7 +645,29 @@ ...@@ -624,7 +645,29 @@
}); });
api.jcwdtj(params).then(res => {
this.isSkeleton = false;
if(res.code === 200 && res.data){
this.echartsData=res.data
this.initChart(res.data)
api.topten(params).then(res => {
this.echartsData.topTenCompanyArea=res.data.topTenCompanyArea;
this.echartsData.topTenCompany=res.data.topTenCompany;
}).catch(error => {
});
}else {
this.echartsDataState=true;
}
}).catch(error => {
});
api.statisticsOfAmountAndArea(params).then(res => {
this.sumMoney=res.data.sumMoney
this.sumArea=res.data.sumArea
}).catch(error => {
});
}, },
//关闭支付弹窗 //关闭支付弹窗
...@@ -951,6 +994,387 @@ ...@@ -951,6 +994,387 @@
this.addressListfn(); this.addressListfn();
this.searchDic(); this.searchDic();
}, },
handledialog(){
this.dialogEchartsVisible=true;
this.initChart1(this.echartsData)
},
initChart(row) {
var data=[];
for(let key in row.landUseList){
for(const i in row.landUseList[key]){
var obj={};
obj.name=i;
obj.value=row.landUseList[key][i];
data.push(obj)
}
}
var data1=[];
for(let key in row.provinceList){
for(const i in row.provinceList[key]){
var obj={};
obj.name=i;
obj.value=row.provinceList[key][i];
data1.push(obj)
}
}
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts1"))
let option ={
tooltip: {
trigger: 'item',
},
// legend: {
// type: 'scroll',
// orient: 'horizontal',
// bottom: 0,
// data: data,
// itemHeight:8,
// itemWidth:12,
// pageButtonPosition: 'end',
// },
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '85%',
center: ['50%', '50%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart.setOption(option);
let myChart1 = echarts.init(document.getElementById("echarts2"))
let option1 ={
tooltip: {
trigger: 'item',
},
// legend: {
// type: 'scroll',
// orient: 'horizontal',
// bottom: 0,
// data: data1,
// itemHeight:8,
// itemWidth:12,
// pageButtonPosition: 'end',
// },
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '85%',
center: ['50%', '50%'],
data: data1,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart1.setOption(option1);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
myChart1.resize();//图表跟随页面大小变化宽度
});
})
},
initChart1(row) {
let data=[];
for(let key in row.landUseList){
for(const i in row.landUseList[key]){
let obj={};
obj.name=i;
obj.value=row.landUseList[key][i];
data.push(obj)
}
}
let data1=[];
for(let key in row.provinceList){
for(const i in row.provinceList[key]){
let obj={};
obj.name=i;
obj.value=row.provinceList[key][i];
data1.push(obj)
}
}
let data2=[];
for(let key in row.topTenCompanyArea){
for(const i in row.topTenCompanyArea[key]){
let obj={};
obj.name=i;
obj.value=row.topTenCompanyArea[key][i];
data2.push(obj)
}
}
let data3=[];
for(let key in row.topTenCompany){
for(const i in row.topTenCompany[key]){
let obj={};
obj.name=i;
obj.value=row.topTenCompany[key][i];
data3.push(obj)
}
}
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts-td"))
let option ={
tooltip: {
trigger: 'item',
},
// legend: {
// type: 'scroll',
// orient: 'horizontal',
// bottom: 0,
// data: data,
// itemHeight:8,
// itemWidth:12,
// pageButtonPosition: 'end',
// },
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart.setOption(option);
let myChart1 = echarts.init(document.getElementById("echarts-jy"))
let option1 ={
tooltip: {
trigger: 'item',
},
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: data1,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart1.setOption(option1);
let myChart2 = echarts.init(document.getElementById("echarts-tze"))
let option2 ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
axisLabel: {
formatter: function (params) {
var str = ""; // 最终拼接成的字符串
var paramsLen = params.length;// 获取每项文字的个数
var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
if (paramsLen > len) { //大于设定的len就换行，不大于就不变化
for (var i = 0; i < rowNumber; i++) {
var temp = ""; // 表示每一次截取的字符串
var start = i * len; // 开始截取的位置
var end = start + len; // 结束截取的位置
if (i == rowNumber - 1) { // 最后一次不换行
temp = params.substring(start, paramsLen);
} else { // 每一次拼接字符串并换行
temp = params.substring(start, end) + "\n";
}
str += temp; // 最终拼成的字符串
}
} else { // 给新的字符串赋值
str = params;
}
return str; //返回字符串
}
},
axisTick: false, //坐标轴刻度
axisPointer: {
type: 'shadow'
},
data: data2.map(item => item.name),
},
yAxis: [
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位：m²',
nameLocation: 'end',
nameTextStyle: {
padding: [0, 10, 0, -30], // 四个数字分别为上右下左与原位置距离
color: '#666666',
}
},
],
grid: {
top:40,
left:80,
right:20,
bottom:50,
},
series: [
{
name:'受让面积',
type: 'bar',
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#E49708'
}, {
offset: 1,
color: '#E49708'
}]),
// barBorderRadius:[20,20, 0, 0]
}
},
data:data2.map(item => item.value),
}
]
}
myChart2.setOption(option2);
let myChart3 = echarts.init(document.getElementById("echarts-xms"))
let option3 ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
axisLabel: {
formatter: function (params) {
var str = ""; // 最终拼接成的字符串
var paramsLen = params.length;// 获取每项文字的个数
var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
if (paramsLen > len) { //大于设定的len就换行，不大于就不变化
for (var i = 0; i < rowNumber; i++) {
var temp = ""; // 表示每一次截取的字符串
var start = i * len; // 开始截取的位置
var end = start + len; // 结束截取的位置
if (i == rowNumber - 1) { // 最后一次不换行
temp = params.substring(start, paramsLen);
} else { // 每一次拼接字符串并换行
temp = params.substring(start, end) + "\n";
}
str += temp; // 最终拼成的字符串
}
} else { // 给新的字符串赋值
str = params;
}
return str; //返回字符串
}
},
axisTick: false, //坐标轴刻度
axisPointer: {
type: 'shadow'
},
data: data3.map(item => item.name),
},
yAxis: [
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位：个',
nameLocation: 'end',
nameTextStyle: {
padding: [0, 10, 0, -30], // 四个数字分别为上右下左与原位置距离
color: '#666666',
}
},
],
grid: {
top:40,
left:60,
right:20,
bottom:60,
},
series: [
{
name:'土地数量',
type: 'bar',
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#E49708'
}, {
offset: 1,
color: '#E49708'
}]),
// barBorderRadius:[20,20, 0, 0]
}
},
data:data3.map(item => item.value),
}
]
}
myChart3.setOption(option3);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
myChart1.resize();//图表跟随页面大小变化宽度
myChart2.resize();//图表跟随页面大小变化宽度
myChart3.resize();//图表跟随页面大小变化宽度
});
})
},
}, },
}; };
</script> </script>
...@@ -1041,8 +1465,7 @@ ...@@ -1041,8 +1465,7 @@
.bottomlist{ .bottomlist{
width: 100%; width: 100%;
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
.bottomlist-title{ .bottomlist-title{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -1083,7 +1506,6 @@ ...@@ -1083,7 +1506,6 @@
} }
.bottomlist-content{ .bottomlist-content{
padding-bottom: 0px; padding-bottom: 0px;
} }
.bottomlist-list{ .bottomlist-list{
...@@ -1175,7 +1597,6 @@ ...@@ -1175,7 +1597,6 @@
} }
.bottomlist-list:hover{ .bottomlist-list:hover{
background: #F6F9FC; background: #F6F9FC;
} }
.pagination{ .pagination{
padding: 14px ; padding: 14px ;
...@@ -1183,7 +1604,64 @@ ...@@ -1183,7 +1604,64 @@
float: right; float: right;
} }
} }
.chart{
height: 306px;
display: flex;
margin: 16px 20px;
width: calc(100% - 40px);
.chart-left{
height: 306px;
border: 1px solid #EFEFEF;
border-radius: 4px;
width: calc(100% - 74px);
display: flex;
.echarts-title{
color: #303133;
font-size: 14px;
font-weight: 700;
padding-bottom: 14px;
}
.echarts-item{
width: calc(50% - 16px);
padding: 16px 0 16px 16px;
}
}
.chart-right{
height: 306px;
border-radius: 8px;
border: 1px solid #1373D9;
color: #1373D9;
text-align: center;
font-size: 14px;
padding-top: 103px;
cursor: pointer;
margin-left: 16px;
width: 56px;
}
.chart-right:hover{
background: #E8F1FC;
}
}
} }
.dialogEcharts{
::v-deep .el-dialog {
.el-dialog__body{
padding: 16px 19px 0 16px;
max-height: 664px;
overflow: auto;
}
.echarts-item{
border: 1px solid #DCDFE6;
width: 550px;
display: inline-block;
border-radius: 4px;
padding: 16px;
margin-bottom: 16px;
}
.echarts-item:nth-child(2){
margin-left: 16px;
}
}
}
</style> </style>
dsk-operate-ui/src/views/radar/components/MajorProject/index.vue
View file @ 798456ab
...@@ -115,7 +115,10 @@ ...@@ -115,7 +115,10 @@
<div class="bottomlist-title"> <div class="bottomlist-title">
<div class="bottomlist-title-left"> <div class="bottomlist-title-left">
<p class="title-left"> <p class="title-left">
<span style="margin-right:4;color:rgba(35, 35, 35, 0.40);font-size: 18px;position: relative;top:2px;">·</span>共有{{total}}条 <span style="margin-right:4px;color:#005BBC;font-size: 22px;position: relative;top:3px;">·</span>共有<span style="color:#F56C6C;">{{total}}</span>条结果
<span style="padding-left: 12px;">
项目投资总额：<span style="color:#E6A23C;">{{sumMoney}}万元</span>
</span>
</p> </p>
<el-popover v-model="fieldshow" placement="bottom-start" trigger="click" popper-class="viewlist-el-popover"> <el-popover v-model="fieldshow" placement="bottom-start" trigger="click" popper-class="viewlist-el-popover">
<ul class="pup_list pup_zhclist"> <ul class="pup_list pup_zhclist">
...@@ -136,6 +139,22 @@ ...@@ -136,6 +139,22 @@
</div> </div>
</div> </div>
<div class="chart" v-if="echartsDataState === false && !isSkeleton">
<div class="chart-left">
<div class="echarts-item">
<div class="echarts-title">项目类型分布</div>
<div id="echarts1" style="height: 240px"></div>
</div>
<div class="echarts-item">
<div class="echarts-title">项目地区分布</div>
<div id="echarts2" style="height: 240px"></div>
</div>
</div>
<div class="chart-right" @click="handledialog">
更<br/>多<br/>分<br/>析<br/>
<i class="el-icon-more"></i>
</div>
</div>
<div class="table-item-jf1" v-if="tableData.length==0&& !isSkeleton"> <div class="table-item-jf1" v-if="tableData.length==0&& !isSkeleton">
<img class="item-jf-img" src="@/assets/images/kong.png" alt=""> <img class="item-jf-img" src="@/assets/images/kong.png" alt="">
<div class="item-jf-titel">抱歉，没找到相关数据！</div> <div class="item-jf-titel">抱歉，没找到相关数据！</div>
...@@ -226,6 +245,36 @@ ...@@ -226,6 +245,36 @@
</div> </div>
</div> </div>
<ExportDialog :data="exportData" v-if="exportData.dialogExportVisible" @clickEXCEL="clickEXCEL"></ExportDialog> <ExportDialog :data="exportData" v-if="exportData.dialogExportVisible" @clickEXCEL="clickEXCEL"></ExportDialog>
<el-dialog title="重点项目清单宏观分析" :visible.sync="dialogEchartsVisible" width="1160px" append-to-body class="dialogEcharts" :close-on-click-modal="false">
<div class="dialog-content">
<div class="echarts-item">
<div class="echarts-title">项目类型分布</div>
<div id="echarts-xmlx" style="height: 240px"></div>
</div>
<div class="echarts-item">
<div class="echarts-title">项目地区分布</div>
<div id="echarts-xmdq" style="height: 240px"></div>
</div>
<div class="echarts-item">
<div class="echarts-title">项目投资额分布</div>
<div id="echarts-xmtz" style="height: 240px"></div>
</div>
<div class="echarts-item">
<div class="echarts-title">项目级别分布</div>
<div id="echarts-xmjb" style="height: 240px"></div>
</div>
<div class="echarts-item" style="width: 100%;">
<div class="echarts-title">投资额前十业主</div>
<div id="echarts-tze" style="height: 240px"></div>
</div>
<div class="echarts-item" style="width: 100%;">
<div class="echarts-title">项目数前十业主</div>
<div id="echarts-xms" style="height: 240px"></div>
</div>
</div>
</el-dialog>
</div> </div>
</template> </template>
...@@ -235,6 +284,7 @@ import { encodeStr } from "@/assets/js/common.js"; ...@@ -235,6 +284,7 @@ import { encodeStr } from "@/assets/js/common.js";
import skeleton from '@/views/project/projectList/component/skeleton'; import skeleton from '@/views/project/projectList/component/skeleton';
import api from '@/api/radar/radar.js'; import api from '@/api/radar/radar.js';
import ExportDialog from "../../../component/export-dialog" import ExportDialog from "../../../component/export-dialog"
import * as echarts from 'echarts';
export default { export default {
name: 'MajorProject', name: 'MajorProject',
components: { skeleton,ExportDialog }, components: { skeleton,ExportDialog },
...@@ -397,6 +447,10 @@ export default { ...@@ -397,6 +447,10 @@ export default {
], ],
exportEXCEL:{} exportEXCEL:{}
}, },
dialogEchartsVisible:false,
echartsData:{},
echartsDataState:false,
sumMoney:0,
}; };
}, },
mounted() { mounted() {
...@@ -451,6 +505,7 @@ export default { ...@@ -451,6 +505,7 @@ export default {
} }
}, },
search(page, limit, exportFlag) { search(page, limit, exportFlag) {
this.isSkeleton = true;
if (!page) { if (!page) {
this.page = 1; this.page = 1;
} }
...@@ -485,7 +540,6 @@ export default { ...@@ -485,7 +540,6 @@ export default {
}; };
this.dataEXCEL = JSON.parse(JSON.stringify(params));; this.dataEXCEL = JSON.parse(JSON.stringify(params));;
api.getImportantPage(params).then(res => { api.getImportantPage(params).then(res => {
this.isSkeleton = false;
if (res.code == 200) { if (res.code == 200) {
this.tableData = res.data.list; this.tableData = res.data.list;
this.total = res.data.total; this.total = res.data.total;
...@@ -495,9 +549,30 @@ export default { ...@@ -495,9 +549,30 @@ export default {
}).catch(error => { }).catch(error => {
}); });
api.zdxmqdjctj(params).then(res => {
this.isSkeleton = false;
if(res.code === 200 && res.data){
this.echartsDataState=false;
this.echartsData=res.data;
this.initChart(res.data)
api.zdxmqdtopten(params).then(res => {
this.echartsData.topTenCompany=res.data.topTenCompany;
this.echartsData.topTenCompanyMoney=res.data.topTenCompanyMoney;
}).catch(error => {
});
}else {
this.echartsDataState=true;
}
}).catch(error => {
});
api.zdxmqdzjetj(params).then(res => {
this.sumMoney=res.data.sumMoney
}).catch(error => {
});
}, },
getUipIdByCid(companyId) { getUipIdByCid(companyId) {
var params = [companyId]; var params = [companyId];
...@@ -711,6 +786,458 @@ export default { ...@@ -711,6 +786,458 @@ export default {
this.exportData.dialogExportVisible=false; this.exportData.dialogExportVisible=false;
this.exportData.exportEXCEL={} this.exportData.exportEXCEL={}
}, },
handledialog(){
this.dialogEchartsVisible=true;
this.initChart1(this.echartsData)
},
initChart(row) {
var data=[];
for(let key in row.projectTypeList){
for(const i in row.projectTypeList[key]){
var obj={};
obj.name=i;
obj.value=row.projectTypeList[key][i];
data.push(obj)
}
}
var data1=[];
for(let key in row.provinceList){
for(const i in row.provinceList[key]){
var obj={};
obj.name=i;
obj.value=row.provinceList[key][i];
data1.push(obj)
}
}
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts1"))
let option ={
tooltip: {
trigger: 'item',
},
// legend: {
// type: 'scroll',
// orient: 'horizontal',
// bottom: 0,
// data: data,
// itemHeight:8,
// itemWidth:12,
// pageButtonPosition: 'end',
// },
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '85%',
center: ['50%', '50%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart.setOption(option);
let myChart1 = echarts.init(document.getElementById("echarts2"))
let option1 ={
tooltip: {
trigger: 'item',
},
// legend: {
// type: 'scroll',
// orient: 'horizontal',
// bottom: 0,
// data: data1,
// itemHeight:8,
// itemWidth:12,
// pageButtonPosition: 'end',
// },
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '85%',
center: ['50%', '50%'],
data: data1,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart1.setOption(option1);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
myChart1.resize();//图表跟随页面大小变化宽度
});
})
},
initChart1(row) {
let data=[];
for(let key in row.projectTypeList){
for(const i in row.projectTypeList[key]){
let obj={};
obj.name=i;
obj.value=row.projectTypeList[key][i];
data.push(obj)
}
}
let data1=[];
for(let key in row.provinceList){
for(const i in row.provinceList[key]){
let obj={};
obj.name=i;
obj.value=row.provinceList[key][i];
data1.push(obj)
}
}
let data2=[]
for(let i=0; i<row.moneyRange.length; i++){
let obj={};
obj.name=row.moneyRange[i].rangeName;
obj.value=row.moneyRange[i].rate;
data2.push(obj)
}
let data3=[];
for(let key in row.levelList){
for(const i in row.levelList[key]){
let obj={};
obj.name=i;
obj.value=row.levelList[key][i];
data3.push(obj)
}
}
let data4=[];
for(let key in row.topTenCompanyMoney){
for(const i in row.topTenCompanyMoney[key]){
let obj={};
obj.name=i;
obj.value=row.topTenCompanyMoney[key][i]/10000;
data4.push(obj)
}
}
let data5=[];
for(let key in row.topTenCompany){
for(const i in row.topTenCompany[key]){
let obj={};
obj.name=i;
obj.value=row.topTenCompany[key][i];
data5.push(obj)
}
}
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts-xmlx"))
let option ={
tooltip: {
trigger: 'item',
},
// legend: {
// type: 'scroll',
// orient: 'horizontal',
// bottom: 0,
// data: data,
// itemHeight:8,
// itemWidth:12,
// pageButtonPosition: 'end',
// },
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart.setOption(option);
let myChart1 = echarts.init(document.getElementById("echarts-xmdq"))
let option1 ={
tooltip: {
trigger: 'item',
},
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: data1,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart1.setOption(option1);
let myChart2 = echarts.init(document.getElementById("echarts-xmtz"))
let option2 ={
tooltip: {
trigger: 'item',
},
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: data2,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart2.setOption(option2);
let myChart3 = echarts.init(document.getElementById("echarts-xmjb"))
let option3 ={
tooltip: {
trigger: 'item',
},
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: data3,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart3.setOption(option3);
let myChart4 = echarts.init(document.getElementById("echarts-tze"))
let option4 ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
axisLabel: {
formatter: function (params) {
var str = ""; // 最终拼接成的字符串
var paramsLen = params.length;// 获取每项文字的个数
var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
if (paramsLen > len) { //大于设定的len就换行，不大于就不变化
for (var i = 0; i < rowNumber; i++) {
var temp = ""; // 表示每一次截取的字符串
var start = i * len; // 开始截取的位置
var end = start + len; // 结束截取的位置
if (i == rowNumber - 1) { // 最后一次不换行
temp = params.substring(start, paramsLen);
} else { // 每一次拼接字符串并换行
temp = params.substring(start, end) + "\n";
}
str += temp; // 最终拼成的字符串
}
} else { // 给新的字符串赋值
str = params;
}
return str; //返回字符串
}
},
axisTick: false, //坐标轴刻度
axisPointer: {
type: 'shadow'
},
data: data4.map(item => item.name),
},
yAxis: [
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位：亿元',
nameLocation: 'end',
nameTextStyle: {
padding: [0, 10, 0, -30], // 四个数字分别为上右下左与原位置距离
color: '#666666',
}
},
],
grid: {
top:40,
left:60,
right:20,
bottom:50,
},
series: [
{
name:'项目金额',
type: 'bar',
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#E49708'
}, {
offset: 1,
color: '#E49708'
}]),
// barBorderRadius:[20,20, 0, 0]
}
},
data:data4.map(item => item.value),
}
]
}
myChart4.setOption(option4);
let myChart5 = echarts.init(document.getElementById("echarts-xms"))
let option5 ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
axisLabel: {
formatter: function (params) {
var str = ""; // 最终拼接成的字符串
var paramsLen = params.length;// 获取每项文字的个数
var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
if (paramsLen > len) { //大于设定的len就换行，不大于就不变化
for (var i = 0; i < rowNumber; i++) {
var temp = ""; // 表示每一次截取的字符串
var start = i * len; // 开始截取的位置
var end = start + len; // 结束截取的位置
if (i == rowNumber - 1) { // 最后一次不换行
temp = params.substring(start, paramsLen);
} else { // 每一次拼接字符串并换行
temp = params.substring(start, end) + "\n";
}
str += temp; // 最终拼成的字符串
}
} else { // 给新的字符串赋值
str = params;
}
return str; //返回字符串
}
},
axisTick: false, //坐标轴刻度
axisPointer: {
type: 'shadow'
},
data: data5.map(item => item.name),
},
yAxis: [
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位：个',
nameLocation: 'end',
nameTextStyle: {
padding: [0, 10, 0, -30], // 四个数字分别为上右下左与原位置距离
color: '#666666',
}
},
],
grid: {
top:40,
left:60,
right:20,
bottom:50,
},
series: [
{
name:'项目数量',
type: 'bar',
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#E49708'
}, {
offset: 1,
color: '#E49708'
}]),
// barBorderRadius:[20,20, 0, 0]
}
},
data:data5.map(item => item.value),
}
]
}
myChart5.setOption(option5);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
myChart1.resize();//图表跟随页面大小变化宽度
myChart2.resize();//图表跟随页面大小变化宽度
myChart3.resize();//图表跟随页面大小变化宽度
myChart4.resize();//图表跟随页面大小变化宽度
myChart5.resize();//图表跟随页面大小变化宽度
});
})
},
}, },
}; };
</script> </script>
...@@ -721,7 +1248,7 @@ export default { ...@@ -721,7 +1248,7 @@ export default {
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
background: #ffffff; background: #ffffff;
.content_item { .content_item {
padding-top: 20px; padding-top: 18px;
display: flex; display: flex;
align-items: baseline; align-items: baseline;
.label { .label {
...@@ -732,7 +1259,7 @@ export default { ...@@ -732,7 +1259,7 @@ export default {
} }
.content_right { .content_right {
.ename_input { .ename_input {
width: 240px; width: 596px;
margin-right: 20px; margin-right: 20px;
::v-deep .el-input__inner::placeholder { ::v-deep .el-input__inner::placeholder {
color: rgba(35, 35, 35, 0.2) !important; color: rgba(35, 35, 35, 0.2) !important;
...@@ -750,7 +1277,7 @@ export default { ...@@ -750,7 +1277,7 @@ export default {
} }
.el-checkbox { .el-checkbox {
margin-right: 24px; margin-right: 24px;
margin-bottom: 16px; /*margin-bottom: 16px;*/
::v-deep .el-checkbox__label { ::v-deep .el-checkbox__label {
padding-left: 8px; padding-left: 8px;
} }
...@@ -995,10 +1522,75 @@ export default { ...@@ -995,10 +1522,75 @@ export default {
float: right; float: right;
} }
} }
.chart{
height: 306px;
display: flex;
margin: 16px 20px;
width: calc(100% - 40px);
.chart-left{
height: 306px;
border: 1px solid #EFEFEF;
border-radius: 4px;
width: calc(100% - 74px);
display: flex;
.echarts-title{
color: #303133;
font-size: 14px;
font-weight: 700;
padding-bottom: 14px;
}
.echarts-item{
width: calc(50% - 16px);
padding: 16px 0 16px 16px;
}
}
.chart-right{
height: 306px;
border-radius: 8px;
border: 1px solid #1373D9;
color: #1373D9;
text-align: center;
font-size: 14px;
padding-top: 103px;
cursor: pointer;
margin-left: 16px;
width: 56px;
}
.chart-right:hover{
background: #E8F1FC;
}
}
} }
.jabph_popper_box { .jabph_popper_box {
left: 101px; left: 101px;
} }
.dialogEcharts{
::v-deep .el-dialog {
.el-dialog__body{
padding: 16px 19px 0 16px;
height: 664px;
overflow: auto;
}
.echarts-item{
border: 1px solid #DCDFE6;
width: 550px;
display: inline-block;
border-radius: 4px;
padding: 16px;
margin-bottom: 16px;
}
.echarts-item:nth-child(2){
margin-left: 16px;
}
.echarts-item:nth-child(4){
margin-left: 16px;
}
}
}
.dialogExport { .dialogExport {
::v-deep .el-dialog { ::v-deep .el-dialog {
.el-dialog__header { .el-dialog__header {
......
dsk-operate-ui/src/views/radar/components/MajorProject/index2.vue 0 → 100644
View file @ 798456ab
<template>
<div>
<div class="content">
<div class="content_item content_item_padding0">
<div class="label">关键字</div>
<div class="content_right">
<el-input class="ename_input" placeholder="请输入关键字查询" v-model="importantProjectDto.keyword"></el-input>
<el-checkbox-group v-model="importantProjectDto.keywordStr" class="keyword_checkbox">
<el-checkbox v-for="item in keywordTypeList" :label="item.value" :key="item.label">{{item.label}}</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="content_item">
<div class="label">基本信息</div>
<div class="content_right">
<div class="select-dev">
<el-cascader ref="address" v-model="addressType" :options="addressList" :props="props" @change="domicileChange" placeholder="行政区域"
collapse-tags clearable></el-cascader>
</div>
<div class="select-dev">
<el-select @change="changeYear" v-model="importantProjectDto.year" multiple placeholder="项目年度">
<el-option v-for="(item, i) in years" :key="i" :label="item+'年'" :value="item">
</el-option>
</el-select>
</div>
<div class="select-dev">
<el-select v-model="importantProjectDto.fileTitle" multiple placeholder="重点项目清单">
<el-option v-for="(item, i) in fileTitleOptions" :key="i" :label="item" :value="item">
</el-option>
</el-select>
</div>
<el-dropdown @command="transactionPricehandleCommand" placement="bottom-start" trigger="click"
ref="transactionPriceShowPopper" :hide-on-click="false">
<el-input placeholder="中标金额" class="inputMoney" :value="money"></el-input>
<el-dropdown-menu slot="dropdown" class="dropdownMoney">
<el-dropdown-item v-for="(item, i) in transactionPriceOptions" :class="importantProjectDto.startMoney == item.value[0] &&importantProjectDto.endMoney == item.value[1] &&
!startMoney &&!endMoney? 'color_text': '' " :key="i" :command="item.value">{{ item.label }}</el-dropdown-item>
<el-dropdown-item command="" style="padding: 0; text-indent: 20px">
<div @mouseenter="transactionPriceShowPopper = true" @mouseleave="transactionPriceShowPopper = false">
<span :class="(startMoney || endMoney) &&importantProjectDto.startMoney ==startMoney &&
importantProjectDto.endMoney == endMoney? 'color_text': '' ">
自定义
<!--<i class="el-icon-arrow-right"></i>-->
</span>
<div class="jabph_popper_box" style="position: absolute" v-if="transactionPriceShowPopper">
<div class="jabph_popper_wrap">
从
<el-input class="jabph_popper_input" v-limit-num clearable v-model="startMoney"></el-input>
万
</div>
<div class="jabph_popper_wrap">
到
<el-input class="jabph_popper_input" v-limit-num clearable v-model="endMoney"></el-input>
万
</div>
<div class="btn">
<el-button size="mini" @click="transactionPriceCancel">取消</el-button>
<el-button type="primary" size="mini" @click="transactionPricePopperConfirm">确定</el-button>
</div>
</div>
</div>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
<div class="content_item">
<div class="label">项目级别</div>
<div class="content_right">
<el-checkbox-group v-model="importantProjectDto.projectLevel" class="keyword_checkbox">
<el-checkbox v-for="item in projectLevelOption" :label="item.value" :key="item.label">{{item.label}}</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="content_item content_item1">
<div class="label" style="float:left;">项目类型</div>
<div class="content_right">
<el-checkbox-group v-model="importantProjectDto.buildingProjectType" class="checkbox_1122">
<template v-for="(item,index) in projectTypeList">
<el-checkbox v-if="index<showNum" :label="item" :key="index">{{item}}</el-checkbox>
</template>
</el-checkbox-group>
<!--<span class="more" v-if="showNum==10" @click="showNum=99">更多<img src="@/assets/images/more.png" alt=""></span>-->
<!--<span class="more more1" v-if="showNum==99" @click="showNum=10">收起<img src="@/assets/images/more.png" alt=""></span>-->
</div>
</div>
<div class="content_item content_item_padding0">
<div class="geduan">
</div>
</div>
<div class="content_item content_item_padding0">
<div class="search-new">
<span @click="search()">查询</span>
<span @click="reset">重置</span>
</div>
</div>
</div>
<div class="bottomlist">
<div class="bottomlist-title">
<div class="bottomlist-title-left">
<p class="title-left">
<span style="margin-right:4px;color:#005BBC;font-size: 22px;position: relative;top:3px;">·</span>共有<span style="color:#F56C6C;">{{total}}</span>条结果
<span style="padding-left: 12px;">
项目投资总额：<span style="color:#E6A23C;">956535214万元</span>
</span>
</p>
<el-select v-model="fieldText" placeholder="请选择">
<el-option
v-for="item in fieldOptions"
:key="item.key"
:label="item.value"
:value="item.key">
</el-option>
</el-select>
<!--<el-popover v-model="fieldshow" placement="bottom-start" trigger="click" popper-class="viewlist-el-popover">-->
<!--<ul class="pup_list pup_zhclist">-->
<!--<li v-for="(itme,i) in fieldOptions" :class="itme.status?'active':''" @click="handsequencingList(i)" :key="i">-->
<!--{{itme.value}}-->
<!--</li>-->
<!--</ul>-->
<!--<span slot="reference" class="toolbar-right-download">{{fieldText}}<i class="el-icon-arrow-down"-->
<!--:style="{transform:fieldshow?'rotate(180deg)':''}"></i>-->
<!--</span>-->
<!--</el-popover>-->
</div>
<div class="title-right">
<!--<p v-hasPermi="['radar:export:important']">-->
<!--<img src="@/assets/images/EXCEL.png" alt="">-->
<!--<span class="excel" @click="clickDialog">导出EXCEL</span>-->
<!--</p>-->
<el-button class="btn1" @click="clickDialog">导出数据</el-button>
<el-button class="btn2">新增订阅方案</el-button>
</div>
</div>
<div class="chart" v-if="echartsDataState === false && !isSkeleton">
<div class="chart-left">
<div class="echarts-item">
<div class="echarts-title">项目类型分布</div>
<div id="echarts1" style="height: 240px"></div>
</div>
<div class="echarts-item">
<div class="echarts-title">项目地区分布</div>
<div id="echarts2" style="height: 240px"></div>
</div>
</div>
<div class="chart-right" @click="handledialog">
更<br/>多<br/>分<br/>析<br/>
<i class="el-icon-more"></i>
</div>
</div>
<div class="table-item-jf1" v-if="tableData.length==0&& !isSkeleton">
<img class="item-jf-img" src="@/assets/images/kong.png" alt="">
<div class="item-jf-titel">抱歉，没找到相关数据！</div>
<div class="item-jf-text">建议调整关键词或筛选条件，重新搜索！</div>
</div>
<skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
<ul class="bottomlist-content" v-if="tableData.length>0&& !isSkeleton">
<li class="bottomlist-list" v-for="item in tableData">
<p class="list-titel">
<router-link :to="'/radar/MajorProject/details/'+ item.md5" tag="a" class="list-titel-a">
<div class="project-name-of-level">
<span v-if="item.projectLevel" class="project-of-level" :class="[getBackGround(item.projectLevel)]">{{item.projectLevel}}</span>
<span class="project-of-name" v-html="item.projectName"></span>
</div>
</router-link>
</p>
<div class="content-label" v-if="item.province||item.city||item.area">
<span class="list-label list-label-zb" v-if="item.province||item.city||item.area">
{{item.province}}<template v-if="item.city">-{{item.city}}</template><template v-if="item.area">-{{item.area}}</template>
</span>
<!-- <span class="list-label list-label-zb" v-if="item.projectLevel">
{{item.projectLevel}}
</span> -->
</div>
<div class="list-content list-content1" v-if="item.year||item.planStartDate||item.planCompletionDate">
<p class="list-content-text" v-if="item.year">
<span>项目年度：</span>
<span><span class="blue">{{item.year}}</span>年</span>
</p>
<p class="list-content-text" v-if="item.planStartDate">
<span>拟开工时间：</span>
<span><span class="blue">{{item.planStartDate}}</span>年</span>
</p>
<p class="list-content-text" v-if="item.planCompletionDate">
<span>拟建成时间：</span>
<span><span class="blue">{{item.planCompletionDate}}</span>年</span>
</p>
</div>
<div class="list-content list-content1"
v-if="item.buildingProjectType||item.completedInvestment||item.completedPlanInvestment||item.projectTotalInvestment">
<p class="list-content-text" v-if="item.buildingProjectType">
<span>项目类型：</span>
<span>{{item.buildingProjectType}}</span>
</p>
<p class="list-content-text" v-if="item.projectTotalInvestment>0">
<span>项目投资金额：</span>
<span>{{item.projectTotalInvestment}}万元</span>
</p>
<p class="list-content-text" v-if="item.completedInvestment>0">
<span>已完成投资额：</span>
<span>{{item.completedInvestment}}万元</span>
</p>
<p class="list-content-text" v-if="item.completedPlanInvestment>0">
<span>年度投资金额：</span>
<span>{{item.completedPlanInvestment}}万元</span>
</p>
</div>
<div class="list-content list-content1" v-if="item.chargeDepartment||item.contactPersonAndTel||item.constructUnit">
<p class="list-content-text" v-if="item.chargeDepartment">
<span>主管部门：</span>
<span v-html="item.chargeDepartment"></span>
</p>
<p class="list-content-text" v-if="item.constructUnit">
<span>项目法人：</span>
<span v-if="item.constructUnitId">
<span class="blue" @click="getUipIdByCid(item.constructUnitId)" v-html="item.constructUnit"></span>
</span>
<span v-else v-html="item.constructUnit"></span>
</p>
<p class="list-content-text" v-if="item.contactPersonAndTel">
<span>联系人及联系方式：</span>
<span>{{item.contactPersonAndTel}}</span>
</p>
</div>
<div class="list-content list-content1" v-if="item.projectScale">
<p class="list-content-text" v-if="item.projectScale">
<span>建设规模：</span>
<span style="flex:1;" v-html="item.projectScale"></span>
</p>
</div>
</li>
</ul>
<div class="pagination clearfix" v-if="total>0&&pageFlag">
<el-pagination background :page-size="limit" :current-page="page" @current-change="handleCurrentChange" layout="prev, pager, next"
:total="total>limit*500?501*limit:total">
</el-pagination>
</div>
</div>
<ExportDialog :data="exportData" v-if="exportData.dialogExportVisible" @clickEXCEL="clickEXCEL"></ExportDialog>
<el-dialog title="重点项目清单宏观分析" :visible.sync="dialogEchartsVisible" width="1160px" append-to-body class="dialogEcharts" :close-on-click-modal="false">
<div class="dialog-content">
<div class="echarts-item">
<div class="echarts-title">项目类型分布</div>
<div id="echarts-xmlx" style="height: 240px"></div>
</div>
<div class="echarts-item">
<div class="echarts-title">项目地区分布</div>
<div id="echarts-xmdq" style="height: 240px"></div>
</div>
<div class="echarts-item">
<div class="echarts-title">项目投资额分布</div>
<div id="echarts-xmtz" style="height: 240px"></div>
</div>
<div class="echarts-item">
<div class="echarts-title">项目级别分布</div>
<div id="echarts-xmjb" style="height: 240px"></div>
</div>
<div class="echarts-item" style="width: 100%;">
<div class="echarts-title">投资额前十业主</div>
<div id="echarts-tze" style="height: 240px"></div>
</div>
<div class="echarts-item" style="width: 100%;">
<div class="echarts-title">项目数前十业主</div>
<div id="echarts-xms" style="height: 240px"></div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import jsk_data from '../../../../../public/jsk.json';
import { encodeStr } from "@/assets/js/common.js";
import skeleton from '@/views/project/projectList/component/skeleton';
import api from '@/api/radar/radar.js';
import ExportDialog from "../../../component/export-dialog"
import * as echarts from 'echarts';
export default {
name: 'MajorProject',
components: { skeleton,ExportDialog },
data() {
return {
encodeStr,
fieldshow: false,
fieldText: '默认排序',
field: 'year', //查询结果排序方式
fieldOptions: [
{
key: "year",
value: "默认排序",
status: true,
},
{
key: "planStartDate",
value: "按拟开工时间倒序",
status: false,
},
{
key: "planCompletionDate",
value: "按拟建成时间倒序",
status: false,
},
{
key: "projectTotalInvestment",
value: "按项目总投资金额倒序",
status: false,
},
],
isSkeleton: true,
addressList: [],
addressType: [],
props: {
multiple: true,
expandTrigger: "hover",
value: "id",
},
keywordTypeList: [
{
value: 'projectName',
label: '项目名称'
},
{
value: 'constructUnit',
label: '项目法人'
},
{
value: 'chargeDepartment',
label: '主管单位'
},
{
value: 'projectScale',
label: '建设规模'
}
],
projectLevelOption: [
{
label: "省级",
value: "省级",
},
{
label: "市级",
value: "市级",
},
{
label: "区/县级",
value: "区县级",
}
],
years: [],
fileTitleOptions: [],
importantProjectDto: {
province: [],
city: [],
area: [],
year: [],
fileTitle: [],
buildingProjectType: [],
keywordStr: ['projectName'],
keyword: '',
projectLevel: [],
},
startMoney: "",
endMoney: "",
transactionPriceShowPopper: false,
projectTypeList: [],
transactionPriceOptions: [
{
value: [0, 20000],
label: "2亿以下",
},
{
value: [20000, ""],
label: "2亿以上",
},
{
value: [50000, ""],
label: "5亿以上",
},
{
value: [80000, ""],
label: "8亿以上",
},
{
value: [100000, ""],
label: "10亿以上",
},
],
showNum: 10,
provinceText: [],
pageFlag: true,
conditionsArr: [],
tableData: [],
domicile: [],
total: 0,
page: 1,
limit: 20,
dataEXCEL: {},
dialogExportVisible: false,
value: '',
money: '',
exportData:{
title:'重点项目清单',
dialogExportVisible:false,
forData: [
{label: '项目类型', prop: 'buildingProjectType',slot: true,minWidth: '100'},
{label: '项目名称', prop: 'projectName', slot: true,minWidth: '200'},
{label: '主管部门', prop: 'chargeDepartment',slot: true,minWidth: '200'},
{label: '项目法人', prop: 'constructUnit', slot: true,minWidth: '150'},
{label: '项目投资额', prop: 'projectTotalInvestment',slot: true,minWidth: '100'},
{label: '项目地区', prop: 'domicile',minWidth: '100'},
{label: '建设规模', prop: 'projectScale',minWidth: '400'},
{label: '重点项目清单', prop: 'fileTitle',minWidth: '200'},
{label: '附件链接', prop: 'fileUrl', slot: true,minWidth: '300'},
],
exportTableData:[
{
"domicile": "广州",
"chargeDepartment": "广州市商合局",
"constructUnit": '鞍钢股份有限公司',
"projectScale": "项目建设规划总面积约3000亩，其中商住用地面积2000亩，文化旅游综合用地约1000亩，打造集“市井民俗文化体验、休闲度假、亲子研学等”为一体的复合型文化旅游目的地，企业已完成项目规划方案。",
"fileTitle": "广州2023年度重点项目清单.pdf",
"fileUrl": "http://file.jiansheku.com/key_project/b9e22fbf2e409642aa97f8238e934272.pdf",
"buildingProjectType": "房建工程",
"projectTotalInvestment": "1355万元",
"projectName": "广州市产业园区配套基础设施建设",
},
{
"domicile": "重庆",
"chargeDepartment": "国网重庆江津区供电公司",
"constructUnit": '国网重庆江津区供电公司',
"projectScale": "新建110kV变电站1座，主变容量2*50MVA，新建110kV线路20km",
"fileTitle": "重庆市2023年度重点项目清单.xlsx",
"fileUrl": "http://file.jiansheku.com/key_project/b9e22fbf2e409642aa97f8238e934272.pdf",
"buildingProjectType": "电力工程",
"projectTotalInvestment": "5056万元",
"projectName": "重庆江津市110kV输变电工程...",
},
],
exportEXCEL:{}
},
dialogEchartsVisible:false,
echartsData:{},
echartsDataState:false,
sumMoney:0,
};
},
mounted() {
this.addressListfn();
this.search();
this.getComdtion();
this.getImportantSelect();
},
methods: {
getBackGround(key) {
switch (key) {
case "市级":
return "the-city";
case "省级":
return "the-province";
case "区县级":
return "the-area";
default:
break;
}
},
getComdtion() {
api.getImportantCondition().then(res => {
if (res.code == 200) {
this.years = res.data.year;
this.projectTypeList = res.data.type;
}
});
},
changeYear() {
this.fileTitleOptions = [];
if (this.importantProjectDto.year.length) {
this.getImportantSelect();
}
},
getImportantSelect() {
let data = {
year: this.importantProjectDto.year.join(','),
province: this.importantProjectDto.province.join(','),
city: this.importantProjectDto.city.join(','),
area: this.importantProjectDto.area.join(','),
};
api.getImportantSelect(data).then(res => {
if (res.code == 200) {
this.fileTitleOptions = res.data;
}
});
},
refresh(value) {
if (value) {
this.$router.go(0);
}
},
search(page, limit, exportFlag) {
if (!page) {
this.page = 1;
}
if (!limit) {
this.limit = 20;
}
if (!page && !limit) {
this.reloadPage();
}
var data = JSON.parse(JSON.stringify(this.importantProjectDto));
data.province = data.province.join(",");
data.city = data.city.join(",");
data.area = data.area.join(",");
data.keywordStr = data.keywordStr.join(",");
data.projectLevel = data.projectLevel.join(",");
data.year = data.year.join(",");
data.fileTitle = data.fileTitle.join(",");
data.buildingProjectType = data.buildingProjectType.join(",");
for (var i in data) {
if (!data[i]) {
delete data[i];
}
}
let params = {
page: {
page: this.page,
limit: this.limit,
field: this.field,
"order": "desc"
},
importantProjectDto: data,
};
this.dataEXCEL = JSON.parse(JSON.stringify(params));;
api.getImportantPage(params).then(res => {
this.isSkeleton = false;
if (res.code == 200) {
this.tableData = res.data.list;
this.total = res.data.total;
} else {
this.$message.error(res.msg);
}
}).catch(error => {
});
},
getUipIdByCid(companyId) {
var params = [companyId];
api.getUipIdByCid(params).then(res => {
if (res.code == 200) {
if (res.data && res.data.length > 0 && res.data[0].uipId) {
this.$router.push({ path: '/enterprise/' + this.encodeStr(companyId) });
} else {
this.$router.push({ path: '/company/' + this.encodeStr(companyId) });
}
}
}).catch(error => {
});
},
//关闭支付弹窗
resolve(value) {
if (value) {
this.$router.go(0);
}
},
changeMoney(text) {
if (
this.importantProjectDto.startMoney &&
this.importantProjectDto.endMoney &&
Number(this.importantProjectDto.startMoney) >
Number(this.importantProjectDto.endMoney)
) {
this.$message.warning("最低金额不能大于最高金额！");
text == "start" ?
(this.importantProjectDto.startMoney = "") :
(this.importantProjectDto.endMoney = "");
}
},
reloadPage() {
this.pageFlag = false;
this.$nextTick(() => {
this.pageFlag = true;
});
},
handleCurrentChange(page) {
if (page > 500) {
this.$message.warning(`对不起，最多只能访问500页`);
this.reloadPage();
} else {
this.page = page;
this.search(page, this.limit);
}
},
handleSizeChange(limit) {
this.limit = limit;
this.search(this.page, limit);
},
deleteDomicile() {
this.$refs.address.handleClear();
},
domicileChange() {
let arr = this.$refs.address.getCheckedNodes();
let province = [],
city = [],
area = [];
this.domicile = [];
for (var i in arr) {
if (arr[i].parent) {
if (!arr[i].parent.checked) {
arr[i].hasChildren && city.push(arr[i].value);
arr[i].hasChildren && this.domicile.push(arr[i].label);
!arr[i].hasChildren && area.push(arr[i].value);
!arr[i].hasChildren && this.domicile.push(arr[i].label);
}
} else {
province.push(arr[i].value);
this.domicile.push(arr[i].label);
}
}
var obj = JSON.parse(JSON.stringify(this.importantProjectDto));
obj.province = province;
obj.city = city;
obj.area = area;
this.importantProjectDto = obj;
this.fileTitleOptions = [];
if (this.domicile.length) {
this.getImportantSelect();
}
},
transactionPricehandleCommand(command) {
if (command) {
this.$refs.transactionPriceShowPopper.hide();
var obj = JSON.parse(JSON.stringify(this.importantProjectDto));
this.startMoney = "";
this.endMoney = "";
if (command == "不限") {
obj.startMoney = "";
obj.endMoney = "";
} else {
obj.startMoney = command[0];
obj.endMoney = command[1];
}
// importantProjectDto.startMoney+'-'+importantProjectDto.endMoney+'万' : importantProjectDto.startMoney+'万'
if(obj.startMoney){
this.money=obj.startMoney+'万'
}
if(obj.endMoney){
this.money=obj.startMoney+'-'+obj.endMoney+'万'
}
this.importantProjectDto = obj;
}
},
transactionPriceCancel() {
this.transactionPriceShowPopper = false;
this.$refs.transactionPriceShowPopper.hide();
},
transactionPricePopperConfirm() {
if (
this.startMoney &&
this.endMoney &&
!(Number(this.endMoney) > Number(this.startMoney))
) {
return this.$message.warning("最小值必须小于最大值,请重新输入！");
}
this.transactionPriceShowPopper = false;
var obj = JSON.parse(JSON.stringify(this.importantProjectDto));
obj.startMoney = this.startMoney;
obj.endMoney = this.endMoney;
if(obj.startMoney){
this.money=obj.startMoney+'万'
}
if(obj.endMoney){
this.money=obj.startMoney+'-'+obj.endMoney+'万'
}
this.importantProjectDto = obj;
this.$refs.transactionPriceShowPopper.hide();
},
addressListfn() {
var str = [];
for (let x = 0; x < 3; x++) {
for (let i = 0; i < jsk_data.length; i++) {
if (jsk_data[i].regionLevel == x + 1 && x + 1 == 1) {
str.push({
id: jsk_data[i].id,
label: jsk_data[i].regionName,
short: jsk_data[i].short,
value: jsk_data[i].parentId,
children: jsk_data[i].id == 900000 ? undefined : [],
});
} else if (jsk_data[i].regionLevel == x + 1 && x + 1 == 2 && str) {
for (let j = 0; j < str.length; j++) {
if (str[j].id == jsk_data[i].parentId) {
str[j].children.push({
id: jsk_data[i].id,
label: jsk_data[i].regionName,
short: jsk_data[i].short,
value: jsk_data[i].parentId,
children: [],
});
}
}
} else if (jsk_data[i].regionLevel == x + 1 && x + 1 == 3) {
for (let j = 0; j < str.length; j++) {
if (str[j].children) {
for (let k = 0; k < str[j].children.length; k++) {
if (str[j].children[k].id == jsk_data[i].parentId) {
str[j].children[k].children.push({
id: jsk_data[i].id,
label: jsk_data[i].regionName,
short: jsk_data[i].short,
value: jsk_data[i].parentId,
});
}
}
}
}
}
}
}
this.addressList = str;
},
reset() {
Object.assign(this.$data, this.$options.data.call(this)); //重置data
this.init();
this.$emit("reset");
},
init() {
this.search();
this.addressListfn();
this.getComdtion();
},
handsequencingList(index) {
this.fieldshow = false;
this.field = this.fieldOptions[index].key;
for (let i = 0; i < this.fieldOptions.length; i++) {
this.fieldOptions[i].status = false;
}
this.fieldText = this.fieldOptions[index].value;
this.fieldOptions[index].status = true;
this.search();
},
clickDialog(){
this.exportData.dialogExportVisible=true;
},
clickEXCEL(value,title) {
if(this.tableData.length === 0){
this.$message.error('当前信息列表数据为空，请重新筛选数据');
return
}
if(value > 2000){
return
}
this.dataEXCEL.exportExeclName=title;
if(value){
this.dataEXCEL.exportCount=value
}else {
this.dataEXCEL.exportCount=2000;
}
api.radarExport(this.dataEXCEL).then(res => {
if(res.code === 200){
this.exportData.exportEXCEL=true;
}else {
this.$message.error(res.msg);
}
})
},
cancel(){
this.exportData.dialogExportVisible=false;
this.exportData.exportEXCEL={}
},
handledialog(){
this.dialogEchartsVisible=true;
this.initChart1(this.echartsData)
},
initChart(row) {
var data=[];
for(let key in row.projectTypeList){
for(const i in row.projectTypeList[key]){
var obj={};
obj.name=i;
obj.value=row.projectTypeList[key][i];
data.push(obj)
}
}
var data1=[];
for(let key in row.provinceList){
for(const i in row.provinceList[key]){
var obj={};
obj.name=i;
obj.value=row.provinceList[key][i];
data1.push(obj)
}
}
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts1"))
let option ={
tooltip: {
trigger: 'item',
},
// legend: {
// type: 'scroll',
// orient: 'horizontal',
// bottom: 0,
// data: data,
// itemHeight:8,
// itemWidth:12,
// pageButtonPosition: 'end',
// },
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '85%',
center: ['50%', '50%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart.setOption(option);
let myChart1 = echarts.init(document.getElementById("echarts2"))
let option1 ={
tooltip: {
trigger: 'item',
},
// legend: {
// type: 'scroll',
// orient: 'horizontal',
// bottom: 0,
// data: data1,
// itemHeight:8,
// itemWidth:12,
// pageButtonPosition: 'end',
// },
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '85%',
center: ['50%', '50%'],
data: data1,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart1.setOption(option1);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
myChart1.resize();//图表跟随页面大小变化宽度
});
})
},
initChart1(row) {
let data=[];
for(let key in row.projectTypeList){
for(const i in row.projectTypeList[key]){
let obj={};
obj.name=i;
obj.value=row.projectTypeList[key][i];
data.push(obj)
}
}
let data1=[];
for(let key in row.provinceList){
for(const i in row.provinceList[key]){
let obj={};
obj.name=i;
obj.value=row.provinceList[key][i];
data1.push(obj)
}
}
let data2=[]
for(let i=0; i<row.moneyRange.length; i++){
let obj={};
obj.name=row.moneyRange[i].rangeName;
obj.value=row.moneyRange[i].rate;
data2.push(obj)
}
let data3=[];
for(let key in row.levelList){
for(const i in row.levelList[key]){
let obj={};
obj.name=i;
obj.value=row.levelList[key][i];
data3.push(obj)
}
}
let data4=[];
for(let key in row.topTenCompanyMoney){
for(const i in row.topTenCompanyMoney[key]){
let obj={};
obj.name=i;
obj.value=row.topTenCompanyMoney[key][i]/10000;
data4.push(obj)
}
}
let data5=[];
for(let key in row.topTenCompany){
for(const i in row.topTenCompany[key]){
let obj={};
obj.name=i;
obj.value=row.topTenCompany[key][i];
data5.push(obj)
}
}
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts-xmlx"))
let option ={
tooltip: {
trigger: 'item',
},
// legend: {
// type: 'scroll',
// orient: 'horizontal',
// bottom: 0,
// data: data,
// itemHeight:8,
// itemWidth:12,
// pageButtonPosition: 'end',
// },
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart.setOption(option);
let myChart1 = echarts.init(document.getElementById("echarts-xmdq"))
let option1 ={
tooltip: {
trigger: 'item',
},
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: data1,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart1.setOption(option1);
let myChart2 = echarts.init(document.getElementById("echarts-xmtz"))
let option2 ={
tooltip: {
trigger: 'item',
},
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: data2,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart2.setOption(option2);
let myChart3 = echarts.init(document.getElementById("echarts-xmjb"))
let option3 ={
tooltip: {
trigger: 'item',
},
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: data3,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart3.setOption(option3);
let myChart4 = echarts.init(document.getElementById("echarts-tze"))
let option4 ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
axisLabel: {
formatter: function (params) {
var str = ""; // 最终拼接成的字符串
var paramsLen = params.length;// 获取每项文字的个数
var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
if (paramsLen > len) { //大于设定的len就换行，不大于就不变化
for (var i = 0; i < rowNumber; i++) {
var temp = ""; // 表示每一次截取的字符串
var start = i * len; // 开始截取的位置
var end = start + len; // 结束截取的位置
if (i == rowNumber - 1) { // 最后一次不换行
temp = params.substring(start, paramsLen);
} else { // 每一次拼接字符串并换行
temp = params.substring(start, end) + "\n";
}
str += temp; // 最终拼成的字符串
}
} else { // 给新的字符串赋值
str = params;
}
return str; //返回字符串
}
},
axisTick: false, //坐标轴刻度
axisPointer: {
type: 'shadow'
},
data: data4.map(item => item.name),
},
yAxis: [
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位：亿元',
nameLocation: 'end',
nameTextStyle: {
padding: [0, 10, 0, -30], // 四个数字分别为上右下左与原位置距离
color: '#666666',
}
},
],
grid: {
top:40,
left:60,
right:20,
bottom:50,
},
series: [
{
name:'项目金额',
type: 'bar',
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#E49708'
}, {
offset: 1,
color: '#E49708'
}]),
// barBorderRadius:[20,20, 0, 0]
}
},
data:data4.map(item => item.value),
}
]
}
myChart4.setOption(option4);
let myChart5 = echarts.init(document.getElementById("echarts-xms"))
let option5 ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
axisLabel: {
formatter: function (params) {
var str = ""; // 最终拼接成的字符串
var paramsLen = params.length;// 获取每项文字的个数
var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
if (paramsLen > len) { //大于设定的len就换行，不大于就不变化
for (var i = 0; i < rowNumber; i++) {
var temp = ""; // 表示每一次截取的字符串
var start = i * len; // 开始截取的位置
var end = start + len; // 结束截取的位置
if (i == rowNumber - 1) { // 最后一次不换行
temp = params.substring(start, paramsLen);
} else { // 每一次拼接字符串并换行
temp = params.substring(start, end) + "\n";
}
str += temp; // 最终拼成的字符串
}
} else { // 给新的字符串赋值
str = params;
}
return str; //返回字符串
}
},
axisTick: false, //坐标轴刻度
axisPointer: {
type: 'shadow'
},
data: data5.map(item => item.name),
},
yAxis: [
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位：个',
nameLocation: 'end',
nameTextStyle: {
padding: [0, 10, 0, -30], // 四个数字分别为上右下左与原位置距离
color: '#666666',
}
},
],
grid: {
top:40,
left:60,
right:20,
bottom:50,
},
series: [
{
name:'项目数量',
type: 'bar',
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#E49708'
}, {
offset: 1,
color: '#E49708'
}]),
// barBorderRadius:[20,20, 0, 0]
}
},
data:data5.map(item => item.value),
}
]
}
myChart5.setOption(option5);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
myChart1.resize();//图表跟随页面大小变化宽度
myChart2.resize();//图表跟随页面大小变化宽度
myChart3.resize();//图表跟随页面大小变化宽度
myChart4.resize();//图表跟随页面大小变化宽度
myChart5.resize();//图表跟随页面大小变化宽度
});
})
},
},
};
</script>
<style lang="scss">
.dropdownMoney{
width: 148px;
border-radius: 4px;
}
.jabph_popper_box .jabph_popper_wrap .jabph_popper_input .el-input__inner {
width: 110px;
height: 24px;
line-height: 24px;
border-radius: 4px;
}
.jabph_popper_box .jabph_popper_wrap {
margin-top: 10px;
display: inline-block;
}
</style>
<style lang="scss" scoped>
::v-deep .el-cascader-node.in-active-path{
color: #1373D9;
}
.content {
padding: 0px 16px;
padding-top: 16px;
border-radius: 4px 4px 4px 4px;
background: #ffffff;
.content_item {
padding-top: 16px;
display: flex;
align-items: baseline;
.label {
width: 84px;
font-size: 14px;
font-weight: 400;
color: rgba(35, 35, 35, 0.8);
}
.content_right {
.ename_input {
width: 240px;
margin-right: 20px;
::v-deep .el-input__inner::placeholder {
color: rgba(35, 35, 35, 0.2) !important;
}
}
.keyword_checkbox {
/*margin-top: 6px;*/
}
.el-checkbox-group {
display: inline-block;
}
.checkbox_1122 {
/*width: 1122px;*/
margin-right: 6px;
}
::v-deep .el-input.is-focus{
.el-input__inner {
border-color: #1373D9 !important;
}
}
::v-deep .el-checkbox {
margin-right: 16px;
.el-checkbox__label {
padding-left: 8px;
}
.el-checkbox__label {
color: #606266;
}
&.is-checked {
.el-checkbox__label {
color: #1373D9;
}
.el-checkbox__inner {
background-color: #1373D9;
border-color: #1373D9;
}
}
}
::v-deep .inputMoney{
width: 240px;
border-radius: 4px;
}
.more {
font-size: 12px;
cursor: pointer;
color: #0081ff;
img {
width: 6px;
margin-bottom: 2px;
height: 4px;
margin-left: 4px;
}
}
.more1 {
img {
transform: rotate(180deg);
}
}
.select-dev{
text-align: center;
display: inline-block;
position: relative;
color: #333333;
font-size: 14px;
cursor: pointer;
margin-right: 16px;
::v-deep .el-cascader{
width: 240px;
.el-input__inner{
border-radius: 4px;
}
.el-tag:first-child{
max-width: 146px;
/*padding: 0 6px;*/
}
}
::v-deep .el-select{
width: 240px;
.el-input__inner{
border-radius: 4px;
}
}
}
}
.item_ckquery_list {
display: flex;
}
.item_ckquery_list .el-input__icon {
position: relative;
top: 1px;
}
.ckquery_list_right {
width: 640px;
}
.register_count_ipt {
margin-left: 0px;
}
.register_count_ipt .el-input__inner {
width: 174px;
}
::v-deep .el-input-group__prepend {
padding: 0 8px;
}
.content-projecttype {
display: flex;
align-items: center;
justify-content: center;
.projecttype {
font-weight: 400;
color: #232323;
padding: 1px 5px;
margin-right: 4px;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
font-size: 14px;
}
.projecttype:first-child {
padding-left: 0px;
}
.projecttype:hover {
background: #f3f4f5;
padding: 1px 5px;
}
.activetype {
background: #f3f4f5;
padding: 1px 5px !important;
}
}
}
.content_item1 {
display: block;
}
.content_item_padding0 {
padding: 0;
}
}
.content_item .search-new span:last-child {
display: inline-block;
width: 60px;
text-align: center;
color: #606266;
line-height: 30px;
cursor: pointer;
border-radius: 4px;
border: 1px solid #CDD0D6;
opacity: 1;
}
.content_item .search-new span:first-child {
margin-right: 12px;
display: inline-block;
width: 60px;
text-align: center;
cursor: pointer;
background: #1373D9;
color: #fff;
line-height: 32px;
border-radius: 4px;
opacity: 1;
}
.content_item .search-new span:first-child:hover {
background: #2073CA;
}
.content_item .search-new span:last-child:hover {
background: #f5faff;
color: #1373D9;
border-color: #1373D9;
}
.bottomlist {
width: 100%;
background-color: #ffffff;
border-radius: 4px 4px 4px 4px;
.bottomlist-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px;
padding: 16px;
border-bottom: 1px solid #efefef;
.title-right {
display: flex;
align-items: center;
p:last-child {
display: flex;
align-items: center;
font-size: 14px;
font-weight: 400;
color: rgba(35, 35, 35, 0.8);
}
img {
width: 18px;
height: 18px;
}
.excel {
cursor: pointer;
}
.btn1{
width: 88px;
height: 32px;
border-radius: 4px;
background: #1373D9;
margin-right: 10px;
padding: 0;
color:#ffffff;
border: 0;
}
.btn2{
width: 116px;
height: 32px;
border-radius: 4px;
border: 1px solid #DCDFE6;
color: #606266;
padding: 0;
margin-left:0;
}
.btn2:hover{
border: 1px solid #1373D9;
color:#1373D9;
background: #ffffff;
}
}
.bottomlist-title-left {
display: inline-flex;
align-items: center;
.title-left {
height: 16px;
line-height: 16px;
font-size: 12px;
font-weight: 400;
color: #3d3d3d;
}
::v-deep .el-select{
width: 140px;
height: 32px;
margin-left: 12px;
.el-input__inner{
border-radius: 4px;
padding: 0 30px 0 8px;
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
&:focus {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}
}
}
.chart{
height: 306px;
display: flex;
margin: 16px 20px;
width: calc(100% - 40px);
.chart-left{
height: 306px;
border: 1px solid #EFEFEF;
border-radius: 4px;
width: calc(100% - 74px);
display: flex;
.echarts-title{
color: #303133;
font-size: 14px;
font-weight: 700;
padding-bottom: 14px;
}
.echarts-item{
width: calc(50% - 16px);
padding: 16px 0 16px 16px;
}
}
.chart-right{
height: 306px;
border-radius: 8px;
border: 1px solid #1373D9;
color: #1373D9;
text-align: center;
font-size: 14px;
padding-top: 103px;
cursor: pointer;
margin-left: 16px;
width: 56px;
}
.chart-right:hover{
background: #E8F1FC;
}
}
.bottomlist-content {
padding-bottom: 0px;
}
.bottomlist-list {
padding: 16px;
font-size: 14px;
border-bottom: 1px solid #efefef;
padding-bottom: 14px;
.list-titel {
font-size: 16px;
font-weight: 700;
color: #3d3d3d;
line-height: 19px;
.list-titel-a {
text-decoration: none;
color: #3d3d3d;
}
a:hover,
a:visited,
a:link,
a:active {
color: #3d3d3d;
}
}
.content-label {
margin-top: 8px;
.list-label {
background: #f3f3ff;
color: #8491e8;
border-radius: 1px 1px 1px 1px;
padding: 3px 7px;
font-size: 12px;
margin-right: 8px;
}
}
.list-content {
margin-top: 8px;
display: flex;
justify-content: start;
align-items: center;
.list-content-text {
display: flex;
justify-content: start;
align-items: baseline;
margin-right: 32px;
font-size: 14px;
span:first-child {
font-weight: 400;
color: rgba(35, 35, 35, 0.4);
line-height: 20px;
}
span:last-child {
font-weight: 400;
color: rgba(35, 35, 35, 0.8);
line-height: 20px;
}
.blue {
color: #1373D9 !important;
cursor: pointer;
}
}
}
.list-addree {
width: auto;
background: #f3f4f5;
display: inline-flex;
margin-top: 7px;
.list-content-text {
margin-top: 0px;
span {
line-height: 30px !important;
}
}
img {
width: 14px;
margin: 0 8px;
}
}
.list-content1 {
margin-top: 12px;
}
.project-name-of-level {
display: flex;
align-items: center;
.project-of-level {
height: 22px;
line-height: 22px;
text-align: center;
padding: 0px 4px;
font-size: 12px;
font-weight: 400;
color: #fff;
border-radius: 2px;
box-sizing: border-box;
margin-right: 8px;
&.the-city {
background: #ff8c00;
}
&.the-province {
background: #0081ff;
}
&.the-area {
background: #0cbc6d;
}
}
}
}
.bottomlist-list:hover {
background: #f6f9fc;
cursor: pointer;
}
.pagination {
padding: 14px;
.el-pagination {
float: right;
}
}
}
.jabph_popper_box {
left: 147px;
border: 1px solid #E4E7ED;
border-radius: 4px;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);
.btn{
float: right;
::v-deep .el-button{
border-radius: 4px;
}
}
}
.dialogEcharts{
::v-deep .el-dialog {
.el-dialog__body{
padding: 16px 19px 0 16px;
height: 664px;
overflow: auto;
}
.echarts-item{
border: 1px solid #DCDFE6;
width: 550px;
display: inline-block;
border-radius: 4px;
padding: 16px;
margin-bottom: 16px;
}
.echarts-item:nth-child(2){
margin-left: 16px;
}
.echarts-item:nth-child(4){
margin-left: 16px;
}
}
}
.dialogExport {
::v-deep .el-dialog {
.el-dialog__header {
height: 48px;
line-height: 48px;
padding: 0 16px;
border-bottom: 1px solid #e1e1e1;
font-weight: bold;
color: #1d2129;
font-size: 16px;
.tip-img {
width: 18px;
height: 18px;
margin-right: 7px;
margin-bottom: -3px;
}
.el-dialog__headerbtn {
font-size: 20px;
font-weight: bold;
top: 15px;
.el-dialog__close {
color: #999999;
}
}
}
.el-dialog__body {
padding: 16px;
.input {
margin-top: 16px;
.el-input {
width: 160px;
border-radius: 2px;
height: 32px;
.el-input__inner {
height: 32px;
line-height: 32px;
}
}
.el-input-group__append {
padding: 0 14px;
}
p {
color: #ff3c3c;
font-size: 12px;
margin-left: 12px;
display: inline-block;
i {
font-size: 14px;
margin-right: 4px;
}
}
}
.content {
text-align: center;
margin-top: 36px;
.success {
width: 64px;
height: 64px;
margin-bottom: 16px;
}
p {
padding: 0;
margin: 0;
}
.p1 {
color: #232323;
font-size: 16px;
margin-bottom: 8px;
}
.p2 {
color: rgba(35, 35, 35, 0.4);
font-size: 14px;
span {
color: #0081ff;
cursor: pointer;
}
}
}
}
.el-dialog__footer {
text-align: center;
padding-bottom: 24px;
}
}
}
</style>
dsk-operate-ui/src/views/radar/components/Tender/index.vue
View file @ 798456ab
...@@ -4,25 +4,25 @@ ...@@ -4,25 +4,25 @@
<div class="content_item content_item_padding0"> <div class="content_item content_item_padding0">
<div class="label">项目名称</div> <div class="label">项目名称</div>
<div class="content_right"> <div class="content_right">
<el-input class="ename_input" v-model="keyword" <el-input class="ename_input" v-model="keyword"
placeholder="请输入项目名称、文章关键词，多关键词用空格隔开，如：房建 地基"></el-input> placeholder="请输入项目名称、文章关键词，多关键词用空格隔开，如：房建 地基"></el-input>
</div> </div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="label">招采单位</div> <div class="label">招采单位</div>
<div class="content_right"> <div class="content_right">
<el-input v-model="jskBidQueryDto.companyName" clearable <el-input v-model="jskBidQueryDto.companyName" clearable
class="land_ipt_470" placeholder="请输入招标采购单位名称"></el-input> class="land_ipt_470" placeholder="请输入招标采购单位名称"></el-input>
</div> </div>
</div> </div>
<div class="content_item"> <div class="content_item">
<div class="label">招标代理</div> <div class="label">招标代理</div>
<div class="content_right"> <div class="content_right">
<el-input v-model="jskBidQueryDto.agency" clearable class="land_ipt_470" <el-input v-model="jskBidQueryDto.agency" clearable class="land_ipt_470"
placeholder="请输入招标代理机构名称"></el-input> placeholder="请输入招标代理机构名称"></el-input>
</div> </div>
</div> </div>
<div class="content_item"> <div class="content_item">
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
</div> </div>
</div> </div>
<div class="content_item"> <div class="content_item">
...@@ -159,16 +159,16 @@ ...@@ -159,16 +159,16 @@
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
</div> </div>
</div> </div>
<div class="content_item content_item_padding0"> <div class="content_item content_item_padding0">
<div class="geduan"> <div class="geduan">
</div> </div>
</div> </div>
<div class="content_item content_item_padding0"> <div class="content_item content_item_padding0">
<div class="search-new"> <div class="search-new">
<span @click="search()">查询</span> <span @click="search()">查询</span>
<span @click="reset">重置</span> <span @click="reset">重置</span>
...@@ -178,9 +178,12 @@ ...@@ -178,9 +178,12 @@
<div class="bottomlist"> <div class="bottomlist">
<div class="bottomlist-title"> <div class="bottomlist-title">
<div class="bottomlist-title-left" > <div class="bottomlist-title-left" >
<p class="title-left"> <p class="title-left">
<span style="margin-right:4;color:rgba(35, 35, 35, 0.40);font-size: 18px;position: relative;top:2px;">·</span>共有{{total}}条 <span style="margin-right:4px;color:#005BBC;font-size: 22px;position: relative;top:3px;">·</span>共有<span style="color:#F56C6C;">{{total}}</span>条结果
</p> <span style="padding-left: 12px;">
项目预算总额：<span style="color:#E6A23C;">{{sumMoney}}万元</span>
</span>
</p>
</div> </div>
<div class="title-right"> <div class="title-right">
<p> <p>
...@@ -189,18 +192,34 @@ ...@@ -189,18 +192,34 @@
</p> </p>
</div> </div>
</div> </div>
<div class="chart" v-if="echartsDataState === false && !isSkeleton">
<div class="chart-left">
<div class="echarts-item">
<div class="echarts-title">项目类型分布</div>
<div id="echarts1" style="height: 240px"></div>
</div>
<div class="echarts-item">
<div class="echarts-title">项目地区分布</div>
<div id="echarts2" style="height: 240px"></div>
</div>
</div>
<div class="chart-right" @click="handledialog">
更<br/>多<br/>分<br/>析<br/>
<i class="el-icon-more"></i>
</div>
</div>
<div class="table-item-jf1" v-if="tableData.length==0&& !isSkeleton"> <div class="table-item-jf1" v-if="tableData.length==0&& !isSkeleton">
<img class="item-jf-img" src="@/assets/images/kong.png" alt=""> <img class="item-jf-img" src="@/assets/images/kong.png" alt="">
<div class="item-jf-titel">抱歉，没找到相关数据！</div> <div class="item-jf-titel">抱歉，没找到相关数据！</div>
<div class="item-jf-text">建议调整关键词或筛选条件，重新搜索！</div> <div class="item-jf-text">建议调整关键词或筛选条件，重新搜索！</div>
</div> </div>
<skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton> <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
<ul class="bottomlist-content" v-if="tableData.length>0&& !isSkeleton"> <ul class="bottomlist-content" v-if="tableData.length>0&& !isSkeleton">
<li class="bottomlist-list" v-for="item in tableData"> <li class="bottomlist-list" v-for="item in tableData">
<p class="list-titel"> <p class="list-titel">
<router-link :to="'/radar/Tender/details/'+ item.id" tag="a" class="list-titel-a" v-html="item.projectName"></router-link> <router-link :to="'/radar/Tender/details/'+ item.id" tag="a" class="list-titel-a" v-html="item.projectName"></router-link>
</p> </p>
<div class="content-label" v-if="item.tenderStage ||item.domicile ||item.tenderingManner ||item.projectType"> <div class="content-label" v-if="item.tenderStage ||item.domicile ||item.tenderingManner ||item.projectType">
<span class="list-label " v-if="item.tenderStage&&item.tenderStage!='其他'&&item.tenderStage!='空白'"> <span class="list-label " v-if="item.tenderStage&&item.tenderStage!='其他'&&item.tenderStage!='空白'">
{{item.tenderStage}} {{item.tenderStage}}
...@@ -215,7 +234,7 @@ ...@@ -215,7 +234,7 @@
{{item.projectType}} {{item.projectType}}
</span> </span>
</div> </div>
<div class="list-content list-content1" v-if="item.companyName||item.agency"> <div class="list-content list-content1" v-if="item.companyName||item.agency">
<p class="list-content-text" v-if="item.companyName"> <p class="list-content-text" v-if="item.companyName">
<span>招采单位：</span> <span>招采单位：</span>
...@@ -233,7 +252,7 @@ ...@@ -233,7 +252,7 @@
<span v-else v-html="item.agency"> <span v-else v-html="item.agency">
</span> </span>
</p> </p>
</div> </div>
<div class="list-content" v-if="item.bidMoney||item.contactTel || item.agencyContactTel"> <div class="list-content" v-if="item.bidMoney||item.contactTel || item.agencyContactTel">
<p class="list-content-text" v-if="item.bidMoney"> <p class="list-content-text" v-if="item.bidMoney">
...@@ -252,7 +271,7 @@ ...@@ -252,7 +271,7 @@
</span> </span>
</p> </p>
</div> </div>
<div class="list-content" v-if="item.punishDate||item.overTime||item.source"> <div class="list-content" v-if="item.punishDate||item.overTime||item.source">
<p class="list-content-text" v-if="item.punishDate"> <p class="list-content-text" v-if="item.punishDate">
<span>发布时间：</span> <span>发布时间：</span>
...@@ -279,11 +298,33 @@ ...@@ -279,11 +298,33 @@
:total="total>limit*500?501*limit:total"> :total="total>limit*500?501*limit:total">
</el-pagination> </el-pagination>
</div> </div>
</div> </div>
<el-dialog title="公招标讯宏观分析" :visible.sync="dialogEchartsVisible" width="1160px" append-to-body class="dialogEcharts" :close-on-click-modal="false">
<div class="dialog-content">
<div class="echarts-item">
<div class="echarts-title">项目类型分布</div>
<div id="echarts-xmlx" style="height: 240px"></div>
</div>
<div class="echarts-item">
<div class="echarts-title">项目地区分布</div>
<div id="echarts-xmdq" style="height: 240px"></div>
</div>
<div class="echarts-item" style="width: 100%;">
<div class="echarts-title">预算金额分布</div>
<div id="echarts-xmtz" style="height: 240px"></div>
</div>
<div class="echarts-item" style="width: 100%;">
<div class="echarts-title">预算总金额前十业主</div>
<div id="echarts-tze" style="height: 240px"></div>
</div>
<div class="echarts-item" style="width: 100%;">
<div class="echarts-title">招标数量前十业主</div>
<div id="echarts-xms" style="height: 240px"></div>
</div>
</div>
</el-dialog>
</div> </div>
</template> </template>
...@@ -293,7 +334,7 @@ ...@@ -293,7 +334,7 @@
import {encodeStr} from "@/assets/js/common.js" import {encodeStr} from "@/assets/js/common.js"
import skeleton from '@/views/project/projectList/component/skeleton' import skeleton from '@/views/project/projectList/component/skeleton'
import api from '@/api/radar/radar.js'; import api from '@/api/radar/radar.js';
import * as echarts from 'echarts';
export default { export default {
name: 'Tender', name: 'Tender',
components: { components: {
...@@ -305,7 +346,8 @@ ...@@ -305,7 +346,8 @@
//有无联系方式 //有无联系方式
encodeStr, encodeStr,
isSkeleton:true, isSkeleton:true,
phonePointType: [{ phonePointType: [
{
value: '', value: '',
label: '不限' label: '不限'
}, },
...@@ -327,7 +369,8 @@ ...@@ -327,7 +369,8 @@
} }
], ],
phonePointList: [], phonePointList: [],
punishDateOptions: [{ punishDateOptions: [
{
label: "不限", label: "不限",
value: "", value: "",
}, },
...@@ -370,7 +413,8 @@ ...@@ -370,7 +413,8 @@
keyword: "", keyword: "",
keywordNot: "", keywordNot: "",
tenderType: "", tenderType: "",
tenderTypeOptions: [{ tenderTypeOptions: [
{
value: "不限", value: "不限",
key: "", key: "",
status: true, status: true,
...@@ -391,7 +435,8 @@ ...@@ -391,7 +435,8 @@
status: false, status: false,
}, },
], ],
tenderStageOptions: [{ tenderStageOptions: [
{
value: "招标公告", value: "招标公告",
label: "招标公告", label: "招标公告",
}, },
...@@ -436,7 +481,8 @@ ...@@ -436,7 +481,8 @@
label: "答疑补遗公告", label: "答疑补遗公告",
} }
], ],
tenderStageOptions2: [{ tenderStageOptions2: [
{
value: "中标公示", value: "中标公示",
label: "中标公示", label: "中标公示",
}, },
...@@ -465,7 +511,8 @@ ...@@ -465,7 +511,8 @@
label: "合同及验收", label: "合同及验收",
}, },
], ],
tenderStageOptions3: [{ tenderStageOptions3: [
{
value: "开标", value: "开标",
label: "开标", label: "开标",
}, },
...@@ -474,7 +521,8 @@ ...@@ -474,7 +521,8 @@
label: "参投记录", label: "参投记录",
}, },
], ],
tenderingMannerOptions: [{ tenderingMannerOptions: [
{
value: "询价", value: "询价",
label: "询价", label: "询价",
}, },
...@@ -515,7 +563,8 @@ ...@@ -515,7 +563,8 @@
label: "其他", label: "其他",
}, },
], ],
scopeOptions: [{ scopeOptions: [
{
value: "contentInfo", value: "contentInfo",
label: "正文", label: "正文",
}, },
...@@ -530,7 +579,8 @@ ...@@ -530,7 +579,8 @@
], ],
selectedHeight: 64, selectedHeight: 64,
projectTypeOptions: [], projectTypeOptions: [],
contactOptions: [{ contactOptions: [
{
value: "不限", value: "不限",
label: "不限", label: "不限",
}, },
...@@ -547,9 +597,7 @@ ...@@ -547,9 +597,7 @@
label: "有招标代理机构联系人", label: "有招标代理机构联系人",
}, },
], ],
subjectMatterOptions: [ subjectMatterOptions: [],
],
jskBidQueryDto: { jskBidQueryDto: {
province: [], province: [],
city: [], city: [],
...@@ -562,14 +610,15 @@ ...@@ -562,14 +610,15 @@
source: [], source: [],
phonePoint: [], phonePoint: [],
}, },
punishDate: "", punishDate: "",
punishDateShowPopper: false, punishDateShowPopper: false,
punishDateValue: "", punishDateValue: "",
startBidMoney: "", startBidMoney: "",
endBidMoney: "", endBidMoney: "",
bidMoneyShowPopper: false, bidMoneyShowPopper: false,
bidMoneyOptions: [{ bidMoneyOptions: [
{
value: "不限", value: "不限",
label: "不限", label: "不限",
}, },
...@@ -601,7 +650,8 @@ ...@@ -601,7 +650,8 @@
fieldshow: false, fieldshow: false,
fieldText: '默认排序', fieldText: '默认排序',
field: '', //查询结果排序方式 field: '', //查询结果排序方式
fieldOptions: [{ fieldOptions: [
{
key: "", key: "",
value: "默认排序", value: "默认排序",
status: true, status: true,
...@@ -624,12 +674,16 @@ ...@@ -624,12 +674,16 @@
], ],
domicile: [], domicile: [],
conditionsArr: [], conditionsArr: [],
total: 0, total: 0,
page: 1, page: 1,
pageFlag: true, pageFlag: true,
tableData:[], tableData:[],
limit: 20 limit: 20,
dialogEchartsVisible:false,
echartsData:{},
echartsDataState:false,
sumMoney:0,
}; };
}, },
computed: { computed: {
...@@ -735,10 +789,7 @@ ...@@ -735,10 +789,7 @@
this.search(); this.search();
}, },
mounted() { mounted() {
this.addressListfn(); this.addressListfn();
}, },
methods: { methods: {
searchDic(){ searchDic(){
...@@ -746,9 +797,9 @@ ...@@ -746,9 +797,9 @@
this.projectTypeOptions = res.projectType; this.projectTypeOptions = res.projectType;
this.subjectMatterOptions = res.subjectMatter this.subjectMatterOptions = res.subjectMatter
}).catch(error=>{ }).catch(error=>{
}); });
}, },
//有无联系方式 //有无联系方式
phonePointBtn(e) { phonePointBtn(e) {
...@@ -784,7 +835,7 @@ ...@@ -784,7 +835,7 @@
data.subjectMatter = data.subjectMatter.join(","); data.subjectMatter = data.subjectMatter.join(",");
data.source = data.source.join(","); data.source = data.source.join(",");
data.phonePoint = data.phonePoint.join(","); data.phonePoint = data.phonePoint.join(",");
let params = { let params = {
page: { page: {
page: this.page, page: this.page,
...@@ -797,14 +848,35 @@ ...@@ -797,14 +848,35 @@
params.keywordNot = this.keywordNot; params.keywordNot = this.keywordNot;
this.isSkeleton = true; this.isSkeleton = true;
api.jskBidPage(params).then(res=>{ api.jskBidPage(params).then(res=>{
this.isSkeleton = false;
if (res.code==200) { if (res.code==200) {
this.tableData=res.data.list; this.tableData=res.data.list;
this.total=res.data.total; this.total=res.data.total;
} }
}).catch(error=>{ }).catch(error=>{
}); });
api.zbggjcwdtj(params).then(res => {
this.isSkeleton = false;
if(res.code === 200 && res.data){
this.echartsData=res.data
this.initChart(res.data)
api.zbggtopten(params).then(res => {
this.echartsData.topTenCompany=res.data.topTenCompany;
this.echartsData.topTenCompanyMoney=res.data.topTenCompanyMoney;
}).catch(error => {
});
}else {
this.echartsDataState=true;
}
}).catch(error => {
});
api.zbggzjetj(params).then(res => {
this.sumMoney=res.data.sumMoney
}).catch(error => {
});
}, },
selectedHeightfn() { selectedHeightfn() {
...@@ -1132,12 +1204,411 @@ ...@@ -1132,12 +1204,411 @@
}else{ }else{
this.$router.push({path: '/company/'+this.encodeStr(companyId)}) this.$router.push({path: '/company/'+this.encodeStr(companyId)})
} }
} }
}).catch(error=>{ }).catch(error=>{
}); });
}, },
handledialog(){
this.dialogEchartsVisible=true;
this.initChart1(this.echartsData)
},
initChart(row) {
var data=[];
for(let key in row.projectTypeList){
for(const i in row.projectTypeList[key]){
var obj={};
obj.name=i;
obj.value=row.projectTypeList[key][i];
data.push(obj)
}
}
var data1=[];
for(let key in row.provinceList){
for(const i in row.provinceList[key]){
var obj={};
obj.name=i;
obj.value=row.provinceList[key][i];
data1.push(obj)
}
}
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts1"))
let option ={
tooltip: {
trigger: 'item',
},
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '85%',
center: ['50%', '50%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart.setOption(option);
let myChart1 = echarts.init(document.getElementById("echarts2"))
let option1 ={
tooltip: {
trigger: 'item',
},
// legend: {
// type: 'scroll',
// orient: 'horizontal',
// bottom: 0,
// data: data1,
// itemHeight:8,
// itemWidth:12,
// pageButtonPosition: 'end',
// },
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '85%',
center: ['50%', '50%'],
data: data1,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart1.setOption(option1);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
myChart1.resize();//图表跟随页面大小变化宽度
});
})
},
initChart1(row) {
let data=[];
for(let key in row.projectTypeList){
for(const i in row.projectTypeList[key]){
let obj={};
obj.name=i;
obj.value=row.projectTypeList[key][i];
data.push(obj)
}
}
let data1=[];
for(let key in row.provinceList){
for(const i in row.provinceList[key]){
let obj={};
obj.name=i;
obj.value=row.provinceList[key][i];
data1.push(obj)
}
}
let data2=[]
for(let i=0; i<row.moneyRange.length; i++){
let obj={};
obj.name=row.moneyRange[i].rangeName;
obj.value=row.moneyRange[i].rate;
data2.push(obj)
}
let data3=[];
for(let key in row.topTenCompanyMoney){
for(const i in row.topTenCompanyMoney[key]){
let obj={};
obj.name=i;
obj.value=row.topTenCompanyMoney[key][i]/10000;
data3.push(obj)
}
}
let data4=[];
for(let key in row.topTenCompany){
for(const i in row.topTenCompany[key]){
let obj={};
obj.name=i;
obj.value=row.topTenCompany[key][i];
data4.push(obj)
}
}
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts-xmlx"))
let option ={
tooltip: {
trigger: 'item',
},
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart.setOption(option);
let myChart1 = echarts.init(document.getElementById("echarts-xmdq"))
let option1 ={
tooltip: {
trigger: 'item',
},
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: data1,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart1.setOption(option1);
let myChart2 = echarts.init(document.getElementById("echarts-xmtz"))
let option2 ={
tooltip: {
trigger: 'item',
},
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: data2,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart2.setOption(option2);
let myChart3 = echarts.init(document.getElementById("echarts-tze"))
let option3 ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
axisLabel: {
formatter: function (params) {
var str = ""; // 最终拼接成的字符串
var paramsLen = params.length;// 获取每项文字的个数
var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
if (paramsLen > len) { //大于设定的len就换行，不大于就不变化
for (var i = 0; i < rowNumber; i++) {
var temp = ""; // 表示每一次截取的字符串
var start = i * len; // 开始截取的位置
var end = start + len; // 结束截取的位置
if (i == rowNumber - 1) { // 最后一次不换行
temp = params.substring(start, paramsLen);
} else { // 每一次拼接字符串并换行
temp = params.substring(start, end) + "\n";
}
str += temp; // 最终拼成的字符串
}
} else { // 给新的字符串赋值
str = params;
}
return str; //返回字符串
}
},
axisTick: false, //坐标轴刻度
axisPointer: {
type: 'shadow'
},
data: data3.map(item => item.name),
},
yAxis: [
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位：亿元',
nameLocation: 'end',
nameTextStyle: {
padding: [0, 10, 0, -30], // 四个数字分别为上右下左与原位置距离
color: '#666666',
}
},
],
grid: {
top:40,
left:60,
right:20,
bottom:60,
},
series: [
{
name:'项目金额',
type: 'bar',
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#E49708'
}, {
offset: 1,
color: '#E49708'
}]),
// barBorderRadius:[20,20, 0, 0]
}
},
data:data3.map(item => item.value),
}
]
}
myChart3.setOption(option3);
let myChart4 = echarts.init(document.getElementById("echarts-xms"))
let option4 ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
axisLabel: {
formatter: function (params) {
var str = ""; // 最终拼接成的字符串
var paramsLen = params.length;// 获取每项文字的个数
var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
if (paramsLen > len) { //大于设定的len就换行，不大于就不变化
for (var i = 0; i < rowNumber; i++) {
var temp = ""; // 表示每一次截取的字符串
var start = i * len; // 开始截取的位置
var end = start + len; // 结束截取的位置
if (i == rowNumber - 1) { // 最后一次不换行
temp = params.substring(start, paramsLen);
} else { // 每一次拼接字符串并换行
temp = params.substring(start, end) + "\n";
}
str += temp; // 最终拼成的字符串
}
} else { // 给新的字符串赋值
str = params;
}
return str; //返回字符串
}
},
axisTick: false, //坐标轴刻度
axisPointer: {
type: 'shadow'
},
data: data4.map(item => item.name),
},
yAxis: [
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位：个',
nameLocation: 'end',
nameTextStyle: {
padding: [0, 10, 0, -30], // 四个数字分别为上右下左与原位置距离
color: '#666666',
}
},
],
grid: {
top:40,
left:60,
right:20,
bottom:50,
},
series: [
{
name:'项目数量',
type: 'bar',
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#E49708'
}, {
offset: 1,
color: '#E49708'
}]),
// barBorderRadius:[20,20, 0, 0]
}
},
data:data4.map(item => item.value),
}
]
}
myChart4.setOption(option4);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
myChart1.resize();//图表跟随页面大小变化宽度
myChart2.resize();//图表跟随页面大小变化宽度
myChart3.resize();//图表跟随页面大小变化宽度
myChart4.resize();//图表跟随页面大小变化宽度
});
})
},
}, },
}; };
</script> </script>
...@@ -1266,7 +1737,7 @@ ...@@ -1266,7 +1737,7 @@
.title-right{ .title-right{
display: flex; display: flex;
align-items: center; align-items: center;
p:last-child{ p:last-child{
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -1393,7 +1864,66 @@ ...@@ -1393,7 +1864,66 @@
float: right; float: right;
} }
} }
.chart{
height: 306px;
display: flex;
margin: 16px 20px;
width: calc(100% - 40px);
.chart-left{
height: 306px;
border: 1px solid #EFEFEF;
border-radius: 4px;
width: calc(100% - 74px);
display: flex;
.echarts-title{
color: #303133;
font-size: 14px;
font-weight: 700;
padding-bottom: 14px;
}
.echarts-item{
width: calc(50% - 16px);
padding: 16px 0 16px 16px;
}
}
.chart-right{
height: 306px;
border-radius: 8px;
border: 1px solid #1373D9;
color: #1373D9;
text-align: center;
font-size: 14px;
padding-top: 103px;
cursor: pointer;
margin-left: 16px;
width: 56px;
}
.chart-right:hover{
background: #E8F1FC;
}
}
} }
.dialogEcharts{
::v-deep .el-dialog {
.el-dialog__body{
padding: 16px 19px 0 16px;
max-height: 664px;
overflow: auto;
}
.echarts-item{
border: 1px solid #DCDFE6;
width: 550px;
display: inline-block;
border-radius: 4px;
padding: 16px;
margin-bottom: 16px;
}
.echarts-item:nth-child(2){
margin-left: 16px;
}
}
}
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
#tender_wrap { #tender_wrap {
...@@ -1608,4 +2138,4 @@ ...@@ -1608,4 +2138,4 @@
} }
} }
</style> </style>
\ No newline at end of file
dsk-operate-ui/src/views/radar/components/debtProject/index.vue
View file @ 798456ab
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="content_item content_item_padding0"> <div class="content_item content_item_padding0">
<div class="label">项目名称</div> <div class="label">项目名称</div>
<div class="content_right"> <div class="content_right">
<el-input class="ename_input" <el-input class="ename_input"
placeholder="请输入项目名称关键字" v-model="projectName" ></el-input> placeholder="请输入项目名称关键字" v-model="projectName" ></el-input>
<template v-if="projectName"> <template v-if="projectName">
<span v-for=" (item,k) in nameTypeList" :key="k" style="margin-right: 24px;"> <span v-for=" (item,k) in nameTypeList" :key="k" style="margin-right: 24px;">
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
<span> <span>
项目地区{{addressType.length>0?(addressType.length+'项'):''}} 项目地区{{addressType.length>0?(addressType.length+'项'):''}}
</span> </span>
<i class="el-icon-caret-bottom"></i> <i class="el-icon-caret-bottom"></i>
</div> </div>
<el-cascader ref="address" class="cascader-region select-location" @input="addressListbtn" v-model="addressType" <el-cascader ref="address" class="cascader-region select-location" @input="addressListbtn" v-model="addressType"
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
<!-- <div class="content-projecttype"> <!-- <div class="content-projecttype">
<template v-for="(item,i) in specialBondProjectType"> <template v-for="(item,i) in specialBondProjectType">
<span class="projecttype" :class="item.status?'activetype':''" @click="projecttypebtn(i)"> <span class="projecttype" :class="item.status?'activetype':''" @click="projecttypebtn(i)">
{{item.value}} {{item.value}}
</span> </span>
</template> </template>
</div> --> </div> -->
...@@ -71,30 +71,30 @@ ...@@ -71,30 +71,30 @@
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
</div> </div>
</div> </div>
<div class="content_item content_item_padding0"> <div class="content_item content_item_padding0">
<div class="geduan"> <div class="geduan">
</div> </div>
</div> </div>
<div class="content_item content_item_padding0"> <div class="content_item content_item_padding0">
<div class="search-new"> <div class="search-new">
<span @click="search()">查询</span> <span @click="search()">查询</span>
<span @click="reset">重置</span> <span @click="reset">重置</span>
</div> </div>
</div> </div>
</div> </div>
<div class="bottomlist"> <div class="bottomlist">
<div class="bottomlist-title"> <div class="bottomlist-title">
<div class="bottomlist-title-left" > <div class="bottomlist-title-left" >
<p class="title-left"> <p class="title-left">
<span style="margin-right:4;color:rgba(35, 35, 35, 0.40);font-size: 18px;position: relative;top:2px;">·</span>共有{{total}}条 <span style="margin-right:4px;color:#005BBC;font-size: 22px;position: relative;top:3px;">·</span>共有<span style="color:#F56C6C;">{{total}}</span>条结果
</p> <span style="padding-left: 12px;">
项目投资总额：<span style="color:#E6A23C;">{{sumMoney}}万元</span>
</span>
</p>
</div> </div>
<div class="title-right"> <div class="title-right">
<p> <p>
...@@ -103,22 +103,38 @@ ...@@ -103,22 +103,38 @@
</p> </p>
</div> </div>
</div> </div>
<div class="chart" v-if="echartsDataState === false && !isSkeleton">
<div class="chart-left">
<div class="echarts-item">
<div class="echarts-title">项目类型分布</div>
<div id="echarts1" style="height: 240px"></div>
</div>
<div class="echarts-item">
<div class="echarts-title">项目地区分布</div>
<div id="echarts2" style="height: 240px"></div>
</div>
</div>
<div class="chart-right" @click="handledialog">
更<br/>多<br/>分<br/>析<br/>
<i class="el-icon-more"></i>
</div>
</div>
<div class="table-item-jf1" v-if="tableData.length==0&& !isSkeleton"> <div class="table-item-jf1" v-if="tableData.length==0&& !isSkeleton">
<img class="item-jf-img" src="@/assets/images/kong.png" alt=""> <img class="item-jf-img" src="@/assets/images/kong.png" alt="">
<div class="item-jf-titel">抱歉，没找到相关数据！</div> <div class="item-jf-titel">抱歉，没找到相关数据！</div>
<div class="item-jf-text">建议调整关键词或筛选条件，重新搜索！</div> <div class="item-jf-text">建议调整关键词或筛选条件，重新搜索！</div>
</div> </div>
<skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton> <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
<ul class="bottomlist-content" v-if="!isSkeleton&&tableData.length>0"> <ul class="bottomlist-content" v-if="!isSkeleton&&tableData.length>0">
<li class="bottomlist-list" v-for="item in tableData"> <li class="bottomlist-list" v-for="item in tableData">
<p class="list-titel"> <p class="list-titel">
<router-link :to="'/radar/debtProject/details/'+ item.id" tag="a" class="list-titel-a" v-html="item.projectName" ></router-link> <router-link :to="'/radar/debtProject/details/'+ item.id" tag="a" class="list-titel-a" v-html="item.projectName" ></router-link>
</p> </p>
<div class="content-label" v-if="item.domicile"> <div class="content-label" v-if="item.domicile">
<span class="list-label">{{item.domicile}}</span> <span class="list-label">{{item.domicile}}</span>
</div> </div>
<div class="list-content"> <div class="list-content">
<p class="list-content-text" v-if="item.projectType&&item.projectType!='空白'"> <p class="list-content-text" v-if="item.projectType&&item.projectType!='空白'">
<span>项目类型：</span> <span>项目类型：</span>
...@@ -149,7 +165,7 @@ ...@@ -149,7 +165,7 @@
<p class="list-content-text" v-if="item.chargeDepartment"> <p class="list-content-text" v-if="item.chargeDepartment">
<span>主管部门：</span> <span>主管部门：</span>
<span v-html="item.chargeDepartment" > <span v-html="item.chargeDepartment" >
</span> </span>
</p> </p>
<p class="list-content-text" v-if="item.piu" > <p class="list-content-text" v-if="item.piu" >
...@@ -175,12 +191,35 @@ ...@@ -175,12 +191,35 @@
</el-pagination> </el-pagination>
</div> </div>
</template> </template>
</div> </div>
<el-dialog title="政府专项债项目宏观分析" :visible.sync="dialogEchartsVisible" width="1160px" append-to-body class="dialogEcharts" :close-on-click-modal="false">
<div class="dialog-content">
<div class="echarts-item">
<div class="echarts-title">项目类型分布</div>
<div id="echarts-xmlx" style="height: 240px"></div>
</div>
<div class="echarts-item">
<div class="echarts-title">项目地区分布</div>
<div id="echarts-xmdq" style="height: 240px"></div>
</div>
<div class="echarts-item" style="width: 100%;">
<div class="echarts-title">项目投资额分布</div>
<div id="echarts-xmtz" style="height: 240px"></div>
</div>
<div class="echarts-item" style="width: 100%;">
<div class="echarts-title">投资额前十业主</div>
<div id="echarts-tze" style="height: 240px"></div>
</div>
<div class="echarts-item" style="width: 100%;">
<div class="echarts-title">项目数前十业主</div>
<div id="echarts-xms" style="height: 240px"></div>
</div>
</div>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
...@@ -188,6 +227,7 @@ ...@@ -188,6 +227,7 @@
import skeleton from '@/views/project/projectList/component/skeleton' import skeleton from '@/views/project/projectList/component/skeleton'
import api from '@/api/radar/radar.js'; import api from '@/api/radar/radar.js';
import jsk_data from '../../../../../public/jsk.json'; import jsk_data from '../../../../../public/jsk.json';
import * as echarts from 'echarts';
export default { export default {
name: 'debtProject', name: 'debtProject',
components:{skeleton}, components:{skeleton},
...@@ -196,20 +236,22 @@ ...@@ -196,20 +236,22 @@
encodeStr, encodeStr,
isSkeleton:true, isSkeleton:true,
projectName:'', projectName:'',
nameTypeList: [{ nameTypeList: [
key: 'like', {
status: true , key: 'like',
value: '模糊搜索', status: true ,
}, value: '模糊搜索',
{ },
key: 'match', {
status: false, key: 'match',
value: '精准匹配', status: false,
}, value: '精准匹配',
},
], ],
nameType: 'like', nameType: 'like',
projectEntity:'', projectEntity:'',
countTypelist: [{ countTypelist: [
{
key: '1', key: '1',
value: '项目主体' value: '项目主体'
}, },
...@@ -233,19 +275,19 @@ ...@@ -233,19 +275,19 @@
expandTrigger: "hover", expandTrigger: "hover",
value: 'id' value: 'id'
}, },
specialBondProjectType: [ specialBondProjectType: [],
],
projectTypeText: ['不限'], projectTypeText: ['不限'],
projectType:[], projectType:[],
arrList:[], arrList:[],
pageFlag:true, pageFlag:true,
tableData:[], tableData:[],
total:0, total:0,
page:1, page:1,
pageSize:20 pageSize:20,
dialogEchartsVisible:false,
echartsData:{},
echartsDataState:false,
sumMoney:0,
} }
}, },
created() { created() {
...@@ -257,17 +299,17 @@ ...@@ -257,17 +299,17 @@
this.searchDic(); this.searchDic();
this.search(); this.search();
}, },
searchDic(){ searchDic(){
api.searchDic().then(res=>{ api.searchDic().then(res=>{
this.specialBondProjectType=res.specialBondProjectType; this.specialBondProjectType=res.specialBondProjectType;
}).catch(error=>{ }).catch(error=>{
}); });
}, },
changeCommand(str) { changeCommand(str) {
this.chargeDepartment=str; this.chargeDepartment=str;
}, },
addressListfn() { addressListfn() {
var searchid; var searchid;
if(this.$route.name=='search-combinedYN'){ if(this.$route.name=='search-combinedYN'){
...@@ -275,7 +317,7 @@ ...@@ -275,7 +317,7 @@
}else{ }else{
searchid='' searchid=''
} }
var str = []; var str = [];
for (let x = 0; x < 3; x++) { for (let x = 0; x < 3; x++) {
for (let i = 0; i < jsk_data.length; i++) { for (let i = 0; i < jsk_data.length; i++) {
...@@ -299,9 +341,9 @@ ...@@ -299,9 +341,9 @@
children: jsk_data[i].id == 900000 ? undefined : [], children: jsk_data[i].id == 900000 ? undefined : [],
}); });
} }
} else if (jsk_data[i].regionLevel == x + 1 && x + 1 == 2 && str) { } else if (jsk_data[i].regionLevel == x + 1 && x + 1 == 2 && str) {
for (let j = 0; j < str.length; j++) { for (let j = 0; j < str.length; j++) {
if (str[j].id == jsk_data[i].parentId) { if (str[j].id == jsk_data[i].parentId) {
...@@ -332,7 +374,7 @@ ...@@ -332,7 +374,7 @@
} }
} }
} }
this.addressList = str; this.addressList = str;
}, },
// 项目属地 // 项目属地
...@@ -350,7 +392,7 @@ ...@@ -350,7 +392,7 @@
let province = [], let province = [],
city = [], city = [],
area = []; area = [];
for (var i in arr) { for (var i in arr) {
if (arr[i].parent) { if (arr[i].parent) {
if (!arr[i].parent.checked) { if (!arr[i].parent.checked) {
...@@ -361,8 +403,8 @@ ...@@ -361,8 +403,8 @@
provinceCode.push(arr[i].value) provinceCode.push(arr[i].value)
} }
} }
for (let j = 0; j < jsk_data.length; j++) { for (let j = 0; j < jsk_data.length; j++) {
if (provinceCode.length > 0) { if (provinceCode.length > 0) {
for (let i = 0; i < provinceCode.length; i++) { for (let i = 0; i < provinceCode.length; i++) {
...@@ -372,9 +414,9 @@ ...@@ -372,9 +414,9 @@
key: provinceCode[i] key: provinceCode[i]
}) })
} }
} }
} }
if (cityCode.length > 0) { if (cityCode.length > 0) {
for (let i = 0; i < cityCode.length; i++) { for (let i = 0; i < cityCode.length; i++) {
...@@ -384,7 +426,7 @@ ...@@ -384,7 +426,7 @@
key: cityCode[i] key: cityCode[i]
}) })
} }
} }
} }
if (areaCode.length > 0) { if (areaCode.length > 0) {
...@@ -395,10 +437,10 @@ ...@@ -395,10 +437,10 @@
key: areaCode[i] key: areaCode[i]
}) })
} }
} }
} }
} }
if (province.length > 0 || city.length > 0 || area.length > 0) { if (province.length > 0 || city.length > 0 || area.length > 0) {
let arrlist = []; let arrlist = [];
...@@ -469,28 +511,28 @@ ...@@ -469,28 +511,28 @@
"page":this.page, "page":this.page,
"limit":this.limit, "limit":this.limit,
"field":"", "field":"",
"order":"desc" "order":"desc"
}, },
specialBondProjectDto:{} specialBondProjectDto:{}
}; };
if(this.projectName){ if(this.projectName){
params.specialBondProjectDto['projectName']=this.projectName; params.specialBondProjectDto['projectName']=this.projectName;
params.specialBondProjectDto['nameType']=this.nameType; params.specialBondProjectDto['nameType']=this.nameType;
} }
if(this.projectEntity){ if(this.projectEntity){
if(this.chargeDepartment.value=='项目主体'){ if(this.chargeDepartment.value=='项目主体'){
params.specialBondProjectDto['projectEntity']=this.projectEntity; params.specialBondProjectDto['projectEntity']=this.projectEntity;
} }
if(this.chargeDepartment.value=='主管部门'){ if(this.chargeDepartment.value=='主管部门'){
params.specialBondProjectDto['chargeDepartment']=this.projectEntity; params.specialBondProjectDto['chargeDepartment']=this.projectEntity;
} }
if(this.chargeDepartment.value=='实施单位'){ if(this.chargeDepartment.value=='实施单位'){
params.specialBondProjectDto['piu']=this.projectEntity; params.specialBondProjectDto['piu']=this.projectEntity;
} }
} }
if(this.arrList.length>0){ if(this.arrList.length>0){
for (let i = 0; i < this.arrList.length; i++) { for (let i = 0; i < this.arrList.length; i++) {
...@@ -504,17 +546,38 @@ ...@@ -504,17 +546,38 @@
if(this.projectType.length>0&&this.projectType[0]!='不限'){ if(this.projectType.length>0&&this.projectType[0]!='不限'){
params.specialBondProjectDto['projectType'] = this.projectType.join(','); params.specialBondProjectDto['projectType'] = this.projectType.join(',');
} }
this.isSkeleton = true; this.isSkeleton = true;
api.bondProjectPage(params).then(res=>{ api.bondProjectPage(params).then(res=>{
this.isSkeleton = false; if (res.code==200) {
if (res.code==200) { this.tableData=res.data.list;
this.tableData=res.data.list; this.total=res.data.total;
this.total=res.data.total; }
} }).catch(error=>{
}).catch(error=>{
}); });
api.zxzxmjctj(params).then(res => {
this.isSkeleton = false;
if(res.code === 200 && res.data){
this.echartsData=res.data
this.initChart(res.data)
api.zxzxmqytj(params).then(res => {
this.echartsData.topTenCompanyMoney=res.data.topTenCompanyMoney;
this.echartsData.topTenCompany=res.data.topTenCompany;
}).catch(error => {
});
}else {
this.echartsDataState=true;
}
}).catch(error => {
});
api.zxzxmzjetj(params).then(res => {
this.sumMoney=res.data.sumMoney
}).catch(error => {
});
}, },
ckhasValue(param){ ckhasValue(param){
var ckhasValue; var ckhasValue;
...@@ -526,7 +589,7 @@ ...@@ -526,7 +589,7 @@
return ckhasValue; return ckhasValue;
}, },
hasValueThroughObj(times,param,excludeKeys,excludeValues){ hasValueThroughObj(times,param,excludeKeys,excludeValues){
if(times==0){ if(times==0){
this.hasValue=false; this.hasValue=false;
} }
...@@ -541,7 +604,7 @@ ...@@ -541,7 +604,7 @@
}else{ }else{
if(objParam instanceof Object) { if(objParam instanceof Object) {
if (!excludeKeys.includes(key)&&!excludeValues.includes(objParam[key])) { if (!excludeKeys.includes(key)&&!excludeValues.includes(objParam[key])) {
this.hasValue =true; this.hasValue =true;
// return hasValue; // return hasValue;
} }
...@@ -556,7 +619,7 @@ ...@@ -556,7 +619,7 @@
this.hasValueThroughObj(1,param[key],excludeKeys,excludeValues); this.hasValueThroughObj(1,param[key],excludeKeys,excludeValues);
}else{ }else{
if (!excludeKeys.includes(key)&&!excludeValues.includes(param[key])) { if (!excludeKeys.includes(key)&&!excludeValues.includes(param[key])) {
this.hasValue =true; this.hasValue =true;
// return hasValue; // return hasValue;
} }
...@@ -575,20 +638,422 @@ ...@@ -575,20 +638,422 @@
}else{ }else{
this.$router.push({path: '/company/'+this.encodeStr(companyId)}) this.$router.push({path: '/company/'+this.encodeStr(companyId)})
} }
} }
}).catch(error=>{ }).catch(error=>{
}); });
}, },
reset(){ reset(){
Object.assign(this.$data, this.$options.data.call(this)); //重置data Object.assign(this.$data, this.$options.data.call(this)); //重置data
this.init(); this.init();
} },
handledialog(){
this.dialogEchartsVisible=true;
this.initChart1(this.echartsData)
},
initChart(row) {
var data=[];
for(let key in row.projectTypeList){
for(const i in row.projectTypeList[key]){
var obj={};
obj.name=i;
obj.value=row.projectTypeList[key][i];
data.push(obj)
}
}
var data1=[];
for(let key in row.provinceList){
for(const i in row.provinceList[key]){
var obj={};
obj.name=i;
obj.value=row.provinceList[key][i];
data1.push(obj)
}
}
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts1"))
let option ={
tooltip: {
trigger: 'item',
},
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '85%',
center: ['50%', '50%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart.setOption(option);
let myChart1 = echarts.init(document.getElementById("echarts2"))
let option1 ={
tooltip: {
trigger: 'item',
},
// legend: {
// type: 'scroll',
// orient: 'horizontal',
// bottom: 0,
// data: data1,
// itemHeight:8,
// itemWidth:12,
// pageButtonPosition: 'end',
// },
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '85%',
center: ['50%', '50%'],
data: data1,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart1.setOption(option1);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
myChart1.resize();//图表跟随页面大小变化宽度
});
})
},
initChart1(row) {
let data=[];
for(let key in row.projectTypeList){
for(const i in row.projectTypeList[key]){
let obj={};
obj.name=i;
obj.value=row.projectTypeList[key][i];
data.push(obj)
}
}
let data1=[];
for(let key in row.provinceList){
for(const i in row.provinceList[key]){
let obj={};
obj.name=i;
obj.value=row.provinceList[key][i];
data1.push(obj)
}
}
let data2=[]
for(let i=0; i<row.moneyRange.length; i++){
let obj={};
obj.name=row.moneyRange[i].rangeName;
obj.value=row.moneyRange[i].rate;
data2.push(obj)
}
let data3=[];
for(let key in row.topTenCompanyMoney){
for(const i in row.topTenCompanyMoney[key]){
let obj={};
obj.name=i;
obj.value=row.topTenCompanyMoney[key][i]/10000;
data3.push(obj)
}
}
let data4=[];
for(let key in row.topTenCompany){
for(const i in row.topTenCompany[key]){
let obj={};
obj.name=i;
obj.value=row.topTenCompany[key][i];
data4.push(obj)
}
}
this.$nextTick(() => {
let myChart = echarts.init(document.getElementById("echarts-xmlx"))
let option ={
tooltip: {
trigger: 'item',
},
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart.setOption(option);
let myChart1 = echarts.init(document.getElementById("echarts-xmdq"))
let option1 ={
tooltip: {
trigger: 'item',
},
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: data1,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart1.setOption(option1);
let myChart2 = echarts.init(document.getElementById("echarts-xmtz"))
let option2 ={
tooltip: {
trigger: 'item',
},
color:['#1473DC', '#E49708', '#D00F52','#16AF44','#04A4B6','#FFDC6B','#FFC08D','#FE9C77','#E8649B','#A151F5'],
series: [
{
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: data2,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChart2.setOption(option2);
let myChart3 = echarts.init(document.getElementById("echarts-tze"))
let option3 ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
axisLabel: {
formatter: function (params) {
var str = ""; // 最终拼接成的字符串
var paramsLen = params.length;// 获取每项文字的个数
var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
if (paramsLen > len) { //大于设定的len就换行，不大于就不变化
for (var i = 0; i < rowNumber; i++) {
var temp = ""; // 表示每一次截取的字符串
var start = i * len; // 开始截取的位置
var end = start + len; // 结束截取的位置
if (i == rowNumber - 1) { // 最后一次不换行
temp = params.substring(start, paramsLen);
} else { // 每一次拼接字符串并换行
temp = params.substring(start, end) + "\n";
}
str += temp; // 最终拼成的字符串
}
} else { // 给新的字符串赋值
str = params;
}
return str; //返回字符串
}
},
axisTick: false, //坐标轴刻度
axisPointer: {
type: 'shadow'
},
data: data3.map(item => item.name),
},
yAxis: [
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位：亿元',
nameLocation: 'end',
nameTextStyle: {
padding: [0, 10, 0, -30], // 四个数字分别为上右下左与原位置距离
color: '#666666',
}
},
],
grid: {
top:40,
left:80,
right:20,
bottom:50,
},
series: [
{
name:'项目金额',
type: 'bar',
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#E49708'
}, {
offset: 1,
color: '#E49708'
}]),
// barBorderRadius:[20,20, 0, 0]
}
},
data:data3.map(item => item.value),
}
]
}
myChart3.setOption(option3);
let myChart4 = echarts.init(document.getElementById("echarts-xms"))
let option4 ={
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'category',
axisLabel: {
formatter: function (params) {
var str = ""; // 最终拼接成的字符串
var paramsLen = params.length;// 获取每项文字的个数
var len = 6; // 每行能显示的字的个数（根据实际情况自己设置）
var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
if (paramsLen > len) { //大于设定的len就换行，不大于就不变化
for (var i = 0; i < rowNumber; i++) {
var temp = ""; // 表示每一次截取的字符串
var start = i * len; // 开始截取的位置
var end = start + len; // 结束截取的位置
if (i == rowNumber - 1) { // 最后一次不换行
temp = params.substring(start, paramsLen);
} else { // 每一次拼接字符串并换行
temp = params.substring(start, end) + "\n";
}
str += temp; // 最终拼成的字符串
}
} else { // 给新的字符串赋值
str = params;
}
return str; //返回字符串
}
},
axisTick: false, //坐标轴刻度
axisPointer: {
type: 'shadow'
},
data: data4.map(item => item.name),
},
yAxis: [
{
type: 'value',
axisLabel: { //坐标轴刻度标签的相关设置
color:"#666666"
},
name: '单位：个',
nameLocation: 'end',
nameTextStyle: {
padding: [0, 10, 0, -30], // 四个数字分别为上右下左与原位置距离
color: '#666666',
}
},
],
grid: {
top:40,
left:60,
right:20,
bottom:60,
},
series: [
{
name:'项目数量',
type: 'bar',
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
itemStyle: {
normal:{
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#E49708'
}, {
offset: 1,
color: '#E49708'
}]),
// barBorderRadius:[20,20, 0, 0]
}
},
data:data4.map(item => item.value),
}
]
}
myChart4.setOption(option4);
window.addEventListener("resize", function () {
myChart.resize();//图表跟随页面大小变化宽度
myChart1.resize();//图表跟随页面大小变化宽度
myChart2.resize();//图表跟随页面大小变化宽度
myChart3.resize();//图表跟随页面大小变化宽度
myChart4.resize();//图表跟随页面大小变化宽度
});
})
},
} }
} }
</script> </script>
<style lang="scss">
.default_header_dropdown{
left: 266px !important;
top: 218px !important;
border-radius: 4px;
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.content{ .content{
padding: 0px 16px; padding: 0px 16px;
...@@ -606,21 +1071,21 @@ ...@@ -606,21 +1071,21 @@
color: rgba(35,35,35,0.8); color: rgba(35,35,35,0.8);
} }
.content_right{ .content_right{
.ename_input{ .ename_input{
width: 640px; width: 640px;
margin-right: 20px; margin-right: 20px;
} }
} }
.item_ckquery_list { .item_ckquery_list {
display: flex; display: flex;
} }
.item_ckquery_list .el-input__icon { .item_ckquery_list .el-input__icon {
position: relative; position: relative;
top: 1px; top: 1px;
...@@ -630,7 +1095,7 @@ ...@@ -630,7 +1095,7 @@
} }
.register_count_ipt{ .register_count_ipt{
margin-left: 0px; margin-left: 0px;
} }
.register_count_ipt .el-input__inner{ .register_count_ipt .el-input__inner{
width: 174px; width: 174px;
...@@ -667,9 +1132,9 @@ ...@@ -667,9 +1132,9 @@
padding: 1px 5px !important; padding: 1px 5px !important;
} }
} }
} }
.content_item_padding0{ .content_item_padding0{
padding: 0; padding: 0;
...@@ -677,14 +1142,13 @@ ...@@ -677,14 +1142,13 @@
.content_item18{ .content_item18{
padding-top: 16px; padding-top: 16px;
} }
} }
.bottomlist{ .bottomlist{
width: 100%; width: 100%;
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
.bottomlist-title{ .bottomlist-title{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -706,7 +1170,7 @@ ...@@ -706,7 +1170,7 @@
.title-right{ .title-right{
display: flex; display: flex;
align-items: center; align-items: center;
p:last-child{ p:last-child{
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -724,7 +1188,6 @@ ...@@ -724,7 +1188,6 @@
} }
} }
.bottomlist-content{ .bottomlist-content{
padding-bottom: 0px; padding-bottom: 0px;
} }
.bottomlist-list{ .bottomlist-list{
...@@ -752,20 +1215,20 @@ ...@@ -752,20 +1215,20 @@
background: #F3F3FF; background: #F3F3FF;
color: #8491E8; color: #8491E8;
border-radius: 1px 1px 1px 1px; border-radius: 1px 1px 1px 1px;
padding: 3px 7px; padding: 3px 7px;
font-size: 12px; font-size: 12px;
} }
} }
.list-content{ .list-content{
margin-top: 3px; margin-top: 3px;
display: flex; display: flex;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
.list-content-text{ .list-content-text{
margin-top: 7px; margin-top: 7px;
display: flex; display: flex;
...@@ -773,7 +1236,7 @@ ...@@ -773,7 +1236,7 @@
align-items: center; align-items: center;
margin-right: 32px; margin-right: 32px;
font-size: 14px; font-size: 14px;
span:first-child{ span:first-child{
font-weight: 400; font-weight: 400;
color: rgba(35,35,35,0.4); color: rgba(35,35,35,0.4);
...@@ -787,15 +1250,15 @@ ...@@ -787,15 +1250,15 @@
.blue{ .blue{
color: #0081FF !important; color: #0081FF !important;
cursor: pointer; cursor: pointer;
} }
} }
} }
} }
.bottomlist-list:hover{ .bottomlist-list:hover{
background: #F6F9FC; background: #F6F9FC;
...@@ -807,5 +1270,67 @@ ...@@ -807,5 +1270,67 @@
float: right; float: right;
} }
} }
.chart{
height: 306px;
display: flex;
margin: 16px 20px;
width: calc(100% - 40px);
.chart-left{
height: 306px;
border: 1px solid #EFEFEF;
border-radius: 4px;
width: calc(100% - 74px);
display: flex;
.echarts-title{
color: #303133;
font-size: 14px;
font-weight: 700;
padding-bottom: 14px;
}
.echarts-item{
width: calc(50% - 16px);
padding: 16px 0 16px 16px;
}
}
.chart-right{
height: 306px;
border-radius: 8px;
border: 1px solid #1373D9;
color: #1373D9;
text-align: center;
font-size: 14px;
padding-top: 103px;
cursor: pointer;
margin-left: 16px;
width: 56px;
}
.chart-right:hover{
background: #E8F1FC;
}
}
} }
</style>
\ No newline at end of file .dialogEcharts{
::v-deep .el-dialog {
.el-dialog__body{
padding: 16px 19px 0 16px;
max-height: 664px;
overflow: auto;
}
.echarts-item{
border: 1px solid #DCDFE6;
width: 550px;
display: inline-block;
border-radius: 4px;
padding: 16px;
margin-bottom: 16px;
}
.echarts-item:nth-child(2){
margin-left: 16px;
}
}
}
</style>
dsk-operate-ui/src/views/radar/components/debtProject/index2.vue 0 → 100644
View file @ 798456ab
<template>
<div>
<div class="debtProject-content">
<div class="content_item content_item_padding0">
<div class="label">项目名称</div>
<div class="content_right">
<el-input class="ename_input" placeholder="请输入项目名称关键字" v-model="projectName" ></el-input>
<template v-if="projectName">
<span v-for=" (item,k) in nameTypeList" :key="k" style="margin-right: 24px;">
<el-radio v-model="nameType" :label="item.key">{{item.value}}</el-radio>
</span>
</template>
</div>
</div>
<div class="content_item ">
<div class="label">项目当事人</div>
<div class="content_right">
<div class="item_ckquery_list" >
<div class="ckquery_list_right">
<el-input ref="inp"
v-model="projectEntity" autocomplete="off" type="text"
class="register_count_ipt" placeholder="请输入企业名称">
<el-dropdown trigger="click" slot="prepend" placement="bottom-start" style="cursor:pointer;"
@command="changeCommand">
<span class="el-dropdown-link">
{{chargeDepartment.value}}<i class="el-icon-arrow-down"></i>
</span>
<el-dropdown-menu class="default_header_dropdown" slot="dropdown">
<el-dropdown-item v-for="(item,k) in countTypelist" :key="k" :command="item">{{item.value}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-input>
</div>
</div>
</div>
</div>
<div class="content_item content_item16">
<div class="label">项目地区</div>
<div class="content_right">
<div class="select-dev">
<el-cascader ref="address" @input="addressListbtn" v-model="addressType"
:options="addressList" :props="props" collapse-tags></el-cascader>
</div>
</div>
</div>
<div class="content_item content_item16">
<div class="label">项目类型</div>
<div class="content_right">
<div class="select-dev">
<el-select v-model="projectType" multiple placeholder="请选择" collapse-tags>
<el-option v-for="(item, i) in specialBondProjectType" :key="i" :label="item" :value="item">
</el-option>
</el-select>
</div>
</div>
</div>
<div class="content_item content_item_padding0">
<div class="geduan">
</div>
</div>
<div class="content_item content_item_padding0">
<div class="search-new">
<span @click="search()">查询</span>
<span @click="reset">重置</span>
</div>
</div>
</div>
<div class="bottomlist">
<div class="bottomlist-title">
<div class="bottomlist-title-left" >
<p class="title-left">
<span style="margin-right:4px;color:#005BBC;font-size: 22px;position: relative;top:3px;">·</span>共有<span style="color:#F56C6C;">{{total}}</span>条结果
<span style="padding-left: 12px;">
项目投资总额：<span style="color:#E6A23C;">956535214万元</span>
</span>
</p>
</div>
<div class="title-right">
<!--<p>-->
<!--<img src="@/assets/images/EXCEL.png" alt="">-->
<!--<span class="excel" @click="$message({message: '功能正在开发中',type: 'warning'})">导出EXCEL</span>-->
<!--</p>-->
<div class="title-right">
<el-button class="btn1" @click="$message({message: '功能正在开发中',type: 'warning'})">导出数据</el-button>
<el-button class="btn2">新增订阅方案</el-button>
</div>
</div>
</div>
<div class="table-item-jf1" v-if="tableData.length==0&& !isSkeleton">
<img class="item-jf-img" src="@/assets/images/kong.png" alt="">
<div class="item-jf-titel">抱歉，没找到相关数据！</div>
<div class="item-jf-text">建议调整关键词或筛选条件，重新搜索！</div>
</div>
<skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>
<ul class="bottomlist-content" v-if="!isSkeleton&&tableData.length>0">
<li class="bottomlist-list" v-for="item in tableData">
<p class="list-titel">
<router-link :to="'/radar/debtProject/details/'+ item.id" tag="a" class="list-titel-a" v-html="item.projectName" ></router-link>
</p>
<div class="content-label" v-if="item.domicile">
<span class="list-label">{{item.domicile}}</span>
</div>
<div class="list-content">
<p class="list-content-text" v-if="item.projectType&&item.projectType!='空白'">
<span>项目类型：</span>
<span>{{item.projectType}}</span>
</p>
<p class="list-content-text"v-if="item.projectTotalInvestment">
<span>项目总投资(亿)：</span>
<span>{{item.projectTotalInvestment}}</span>
</p>
<p class="list-content-text" v-if="item.projectCapital">
<span>项目资本金(亿)：</span>
<span>{{item.projectCapital}}</span>
</p>
<p class="list-content-text" v-if="item.specialBondCapital">
<span>专项债金额(亿)：</span>
<span>{{item.specialBondCapital}}</span>
</p>
</div>
<div class="list-content">
<p class="list-content-text" v-if="item.projectEntity">
<span>项目主体：</span>
<span v-if="item.projectEntityId">
<span class="blue" @click="getUipIdByCid(item.projectEntityId)" v-html="item.projectEntity"></span>
</span>
<span v-else v-html="item.projectEntity">
</span>
</p>
<p class="list-content-text" v-if="item.chargeDepartment">
<span>主管部门：</span>
<span v-html="item.chargeDepartment" >
</span>
</p>
<p class="list-content-text" v-if="item.piu" >
<span>实施单位：</span>
<span v-if="item.piuId">
<span class="blue" @click="getUipIdByCid(item.piuId)" v-html="item.piu"></span>
</span>
<span v-else v-html="item.piu">
</span>
</p>
</div>
</li>
</ul>
<template v-if="pageFlag">
<div class="pagination clearfix" v-if="total>0&&pageFlag">
<el-pagination
background
:page-size="pageSize"
:current-page="page"
@current-change="handleCurrentChange"
layout="prev, pager, next"
:total="total>limit*500?501*limit:total">
</el-pagination>
</div>
</template>
</div>
</div>
</template>
<script>
import {encodeStr} from "@/assets/js/common.js"
import skeleton from '@/views/project/projectList/component/skeleton'
import api from '@/api/radar/radar.js';
import jsk_data from '../../../../../public/jsk.json';
export default {
name: 'debtProject',
components:{skeleton},
data() {
return {
encodeStr,
isSkeleton:true,
projectName:'',
nameTypeList: [{
key: 'like',
status: true ,
value: '模糊搜索',
},
{
key: 'match',
status: false,
value: '精准匹配',
},
],
nameType: 'like',
projectEntity:'',
countTypelist: [{
key: '1',
value: '项目主体'
},
{
key: '2',
value: '主管部门'
},
{
key: '3',
value: '实施单位'
}
],
chargeDepartment: {
key: '3',
value: '项目主体'
},
addressList: [],
addressType: [],
props: {
multiple: true,
expandTrigger: "hover",
value: 'id'
},
specialBondProjectType: [
],
projectTypeText: ['不限'],
projectType:[],
arrList:[],
pageFlag:true,
tableData:[],
total:0,
page:1,
pageSize:20
}
},
created() {
this.init();
},
methods: {
init(){
this.addressListfn();
this.searchDic();
this.search();
},
searchDic(){
api.searchDic().then(res=>{
this.specialBondProjectType=res.specialBondProjectType;
}).catch(error=>{
});
},
changeCommand(str) {
this.chargeDepartment=str;
},
addressListfn() {
var searchid;
if(this.$route.name=='search-combinedYN'){
searchid='530000'
}else{
searchid=''
}
var str = [];
for (let x = 0; x < 3; x++) {
for (let i = 0; i < jsk_data.length; i++) {
if (jsk_data[i].regionLevel == x + 1 && x + 1 == 1) {
if(searchid){
if (jsk_data[i].id == searchid) {
str.push({
id: jsk_data[i].id,
label: jsk_data[i].regionName,
short: jsk_data[i].short,
value: jsk_data[i].parentId,
children: jsk_data[i].id == 900000 ? undefined : [],
});
}
}else{
str.push({
id: jsk_data[i].id,
label: jsk_data[i].regionName,
short: jsk_data[i].short,
value: jsk_data[i].parentId,
children: jsk_data[i].id == 900000 ? undefined : [],
});
}
} else if (jsk_data[i].regionLevel == x + 1 && x + 1 == 2 && str) {
for (let j = 0; j < str.length; j++) {
if (str[j].id == jsk_data[i].parentId) {
str[j].children.push({
id: jsk_data[i].id,
label: jsk_data[i].regionName,
short: jsk_data[i].short,
value: jsk_data[i].parentId,
children: [],
});
}
}
} else if (jsk_data[i].regionLevel == x + 1 && x + 1 == 3) {
for (let j = 0; j < str.length; j++) {
if (str[j].children) {
for (let k = 0; k < str[j].children.length; k++) {
if (str[j].children[k].id == jsk_data[i].parentId) {
str[j].children[k].children.push({
id: jsk_data[i].id,
label: jsk_data[i].regionName,
short: jsk_data[i].short,
value: jsk_data[i].parentId,
});
}
}
}
}
}
}
}
this.addressList = str;
},
// 项目属地
addressListbtn() {
for (let i = 0; i < this.arrList.length; i++) {
if (this.arrList[i].keyid == 'address') {
this.arrList.splice(i, 1);
i--;
}
}
let arr = (this.$refs.address.getCheckedNodes())
let provinceCode = [],
cityCode = [],
areaCode = [];
let province = [],
city = [],
area = [];
for (var i in arr) {
if (arr[i].parent) {
if (!arr[i].parent.checked) {
arr[i].hasChildren && cityCode.push(arr[i].value);
!arr[i].hasChildren && areaCode.push(arr[i].value);
}
} else {
provinceCode.push(arr[i].value)
}
}
for (let j = 0; j < jsk_data.length; j++) {
if (provinceCode.length > 0) {
for (let i = 0; i < provinceCode.length; i++) {
if (provinceCode[i] == jsk_data[j].id) {
province.push({
value: jsk_data[j].regionName,
key: provinceCode[i]
})
}
}
}
if (cityCode.length > 0) {
for (let i = 0; i < cityCode.length; i++) {
if (cityCode[i] == jsk_data[j].id) {
city.push({
value: jsk_data[j].regionName,
key: cityCode[i]
})
}
}
}
if (areaCode.length > 0) {
for (let i = 0; i < areaCode.length; i++) {
if (areaCode[i] == jsk_data[j].id) {
area.push({
value: jsk_data[j].regionName,
key: areaCode[i]
})
}
}
}
}
if (province.length > 0 || city.length > 0 || area.length > 0) {
let arrlist = [];
if (province.length > 0) {
for (let i in province) {
arrlist.push(province[i].value)
}
}
if (city.length > 0) {
for (let i in city) {
arrlist.push(city[i].value)
}
}
if (area.length > 0) {
for (let i in area) {
arrlist.push(area[i].value)
}
}
console.log(this.addressType);
this.arrList.push({
value: arrlist,
keyid: 'address',
provinceCode: provinceCode,
cityCode: cityCode,
areaCode: areaCode,
title: '项目属地：',
key: '',
addressType:this.addressType
})
}
// this.landMarketDto = obj
},
projecttypebtn(){
for(let i=0;i<this.projectType.length;i++){
if(this.projectType[i]=='不限'){
this.projectType=[];
}
}
},
reloadPage() {
this.pageFlag = false;
this.$nextTick(() => {
this.pageFlag = true;
});
},
handleCurrentChange(page) {
if(page>500){
this.$message.warning(`对不起，最多只能访问500页`);
this.reloadPage()
}else{
this.page = page;
this.search(page, this.limit);
this.jump1();
}
},
search(page, limit,exportFlag) {
if (!page) {
this.page = 1;
}
if (!limit) {
this.limit = 20;
}
if (!page && !limit) {
this.reloadPage();
}
let params = {
page:{
"page":this.page,
"limit":this.limit,
"field":"",
"order":"desc"
},
specialBondProjectDto:{}
};
if(this.projectName){
params.specialBondProjectDto['projectName']=this.projectName;
params.specialBondProjectDto['nameType']=this.nameType;
}
if(this.projectEntity){
if(this.chargeDepartment.value=='项目主体'){
params.specialBondProjectDto['projectEntity']=this.projectEntity;
}
if(this.chargeDepartment.value=='主管部门'){
params.specialBondProjectDto['chargeDepartment']=this.projectEntity;
}
if(this.chargeDepartment.value=='实施单位'){
params.specialBondProjectDto['piu']=this.projectEntity;
}
}
if(this.arrList.length>0){
for (let i = 0; i < this.arrList.length; i++) {
if (this.arrList[i].keyid == "address") {
params.specialBondProjectDto['province'] = this.arrList[i].provinceCode.join(',');
params.specialBondProjectDto['city'] = this.arrList[i].cityCode.join(',');
params.specialBondProjectDto['area'] = this.arrList[i].areaCode.join(',');
}
}
}
if(this.projectType.length>0&&this.projectType[0]!='不限'){
params.specialBondProjectDto['projectType'] = this.projectType.join(',');
}
this.isSkeleton = true;
api.bondProjectPage(params).then(res=>{
this.isSkeleton = false;
if (res.code==200) {
this.tableData=res.data.list;
this.total=res.data.total;
}
}).catch(error=>{
});
},
ckhasValue(param){
var ckhasValue;
if(param){
ckhasValue=this.hasValueThroughObj(0,param);
}else{
ckhasValue=false;
}
return ckhasValue;
},
hasValueThroughObj(times,param,excludeKeys,excludeValues){
if(times==0){
this.hasValue=false;
}
var excludeKeys=['domicile','yitihuaSource'];
var excludeValues=['and','or','{}','[]','','null','undefined'];
　if(Array.isArray(param)){
for(let i=0;i<param.length;i++){
var objParam = param[i];
Object.keys(objParam).map(key => {
if(Array.isArray(objParam[key])||objParam[key] instanceof Object){
this.hasValueThroughObj(1,objParam[key],excludeKeys,excludeValues);
}else{
if(objParam instanceof Object) {
if (!excludeKeys.includes(key)&&!excludeValues.includes(objParam[key])) {
this.hasValue =true;
// return hasValue;
}
}
}
})
}
　}else{
　 if(param instanceof Object) {
Object.keys(param).map(key => {
if(Array.isArray(param[key])||param[key] instanceof Object){
this.hasValueThroughObj(1,param[key],excludeKeys,excludeValues);
}else{
if (!excludeKeys.includes(key)&&!excludeValues.includes(param[key])) {
this.hasValue =true;
// return hasValue;
}
}
})
}
}
return this.hasValue;
},
getUipIdByCid(companyId){
var params=[companyId]
api.getUipIdByCid(params).then(res=>{
if (res.code==200) {
if(res.data&&res.data.length>0&&res.data[0].uipId){
this.$router.push({path: '/enterprise/'+this.encodeStr(companyId)})
}else{
this.$router.push({path: '/company/'+this.encodeStr(companyId)})
}
}
}).catch(error=>{
});
},
reset(){
Object.assign(this.$data, this.$options.data.call(this)); //重置data
this.init();
}
}
}
</script>
<style lang="scss">
.default_header_dropdown{
left: 266px !important;
top: 228px !important;
width: 192px;
height: 112px;
border-radius: 4px;
.el-dropdown-menu__item{
line-height: 32px;
}
.el-dropdown-menu__item:hover{
background: #F5F7FA;
color:#303133;
}
}
</style>
<style lang="scss" scoped>
::v-deep .default_header_dropdown{
left: 266px;
width: 192px;
height: 112px;
border-radius: 4px;
}
.debtProject-content{
padding: 0px 16px;
padding-top: 16px;
border-radius: 4px 4px 4px 4px;
background: #FFFFFF;
.content_item{
padding-top: 20px;
display: flex;
align-items: center;
.label{
width: 84px;
font-size: 14px;
font-weight: 400;
color: rgba(35,35,35,0.8);
}
.content_right{
.ename_input{
width: 640px;
margin-right: 20px;
}
.select-dev{
text-align: center;
display: inline-block;
position: relative;
color: #333333;
font-size: 14px;
cursor: pointer;
margin-right: 16px;
::v-deep .el-cascader{
width: 240px;
.el-input__inner{
border-radius: 4px;
}
.el-tag:first-child{
max-width: 146px;
/*padding: 0 6px;*/
}
}
::v-deep .el-select{
width: 240px;
.el-input__inner{
border-radius: 4px;
}
}
}
}
.item_ckquery_list {
display: flex;
}
.item_ckquery_list .el-input__icon {
position: relative;
top: 1px;
}
.ckquery_list_right {
width: 640px;
}
.register_count_ipt{
margin-left: 0px;
}
.register_count_ipt .el-input__inner{
width: 174px;
}
::v-deep .el-input-group__prepend{
padding: 0 12px;
background-color:#F3F4F5;
border-radius:2px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.content-projecttype{
display: flex;
align-items: center;
justify-content: center;
.projecttype{
font-weight: 400;
color: #303133;
padding: 1px 5px;
margin-right: 4px;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
font-size: 14px;
}
.projecttype:first-child{
padding-left: 0px;
}
.projecttype:hover{
background: #F3F4F5;
padding: 1px 5px;
}
.activetype{
background: #F3F4F5;
padding: 1px 5px !important;
}
}
}
.content_item_padding0{
padding: 0;
}
.content_item18{
padding-top: 16px;
}
}
.content_item .search-new span:last-child {
display: inline-block;
width: 60px;
text-align: center;
color: #606266;
line-height: 30px;
cursor: pointer;
border-radius: 4px;
border: 1px solid #CDD0D6;
opacity: 1;
}
.content_item .search-new span:first-child {
margin-right: 12px;
display: inline-block;
width: 60px;
text-align: center;
cursor: pointer;
background: #1373D9;
color: #fff;
line-height: 32px;
border-radius: 4px;
opacity: 1;
}
.content_item .search-new span:first-child:hover {
background: #2073CA;
}
.content_item .search-new span:last-child:hover {
background: #f5faff;
color: #1373D9;
border-color: #1373D9;
}
.bottomlist{
width: 100%;
background-color: #FFFFFF;
border-radius: 4px 4px 4px 4px;
.bottomlist-title{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px;
padding: 16px ;
border-bottom: 1px solid #EFEFEF;
.bottomlist-title-left{
display: inline-flex;;
align-items: center;
.title-left{
height:16px;
line-height: 16px;
font-size: 12px;
font-weight: 400;
color: #3D3D3D;
}
}
.title-right{
display: flex;
align-items: center;
p:last-child{
display: flex;
align-items: center;
font-size: 14px;
font-weight: 400;
color: rgba(35,35,35,0.8);
}
img{
width: 18px;
height: 18px;
}
.excel{
cursor: pointer;
}
.btn1{
width: 88px;
height: 32px;
border-radius: 4px;
background: #1373D9;
margin-right: 10px;
padding: 0;
color:#ffffff;
border: 0;
}
.btn2{
width: 116px;
height: 32px;
border-radius: 4px;
border: 1px solid #DCDFE6;
color: #606266;
padding: 0;
margin-left:0;
}
.btn2:hover{
border: 1px solid #1373D9;
color:#1373D9;
background: #ffffff;
}
}
}
.bottomlist-content{
padding-bottom: 0px;
}
.bottomlist-list{
padding: 14px;
font-size: 14px;
border-bottom: 1px solid #EFEFEF;
padding-bottom: 14px;
.list-titel{
font-size: 16px;
font-weight: 700;
color: #3D3D3D;
line-height: 19px;
.list-titel-a{
text-decoration: none;
color:#3D3D3D;
}
a:hover, a:visited, a:link, a:active{
color:#3D3D3D;
}
}
.content-label{
margin-top: 5px;
margin-bottom: 5px;
.list-label{
background: #F3F3FF;
color: #8491E8;
border-radius: 1px 1px 1px 1px;
padding: 3px 7px;
font-size: 12px;
}
}
.list-content{
margin-top: 3px;
display: flex;
justify-content: start;
align-items: center;
.list-content-text{
margin-top: 7px;
display: flex;
justify-content: start;
align-items: center;
margin-right: 32px;
font-size: 14px;
span:first-child{
font-weight: 400;
color: rgba(35,35,35,0.4);
line-height: 15px
}
span:last-child{
font-weight: 400;
color: rgba(35,35,35,0.8);
line-height: 15px
}
.blue{
color: #0081FF !important;
cursor: pointer;
}
}
}
}
.bottomlist-list:hover{
background: #F6F9FC;
cursor: pointer;
}
.pagination{
padding: 14px ;
.el-pagination{
float: right;
}
}
}
</style>
dsk-operate-ui/src/views/radar/index.vue
View file @ 798456ab
...@@ -114,7 +114,7 @@ ...@@ -114,7 +114,7 @@
this.personnelList[i].status = false; this.personnelList[i].status = false;
} }
this.personnelList[index].status = true; this.personnelList[index].status = true;
this.personnelHerf=this.personnelList[index].key; this.personnelHerf=this.personnelList[index].key;
}, },
} }
} }
...@@ -134,7 +134,7 @@ ...@@ -134,7 +134,7 @@
.app-container .combined-title { .app-container .combined-title {
display: flex; display: flex;
padding-top: 16px; padding-top: 10px;
align-items: center align-items: center
} }
...@@ -142,7 +142,7 @@ ...@@ -142,7 +142,7 @@
display: inline-block; display: inline-block;
width: 6px; width: 6px;
height: 26px; height: 26px;
background: #0081FF; background: #1373D9;
border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px;
opacity: 1; opacity: 1;
margin-right: 18px; margin-right: 18px;
...@@ -163,7 +163,7 @@ ...@@ -163,7 +163,7 @@
} }
.app-container .combined-title .title-right .title-add { .app-container .combined-title .title-right .title-add {
color: #0081FF; color: #1373D9;
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
right: 0; right: 0;
...@@ -246,19 +246,19 @@ ...@@ -246,19 +246,19 @@
} }
.tab .active { .tab .active {
color: #0081FF; color: #1373D9;
} }
.tab .active .triangle { .tab .active .triangle {
border-top: 4px solid #0081FF; border-top: 4px solid #1373D9;
} }
.tab .active .logo { .tab .active .logo {
background: #0081FF; background: #1373D9;
} }
.tab .active p { .tab .active p {
border-bottom: 2px solid #0081FF; border-bottom: 2px solid #1373D9;
font-weight: bold; font-weight: bold;
} }
</style> </style>
dsk-operate-ui/src/views/radar/index2.vue 0 → 100644
View file @ 798456ab
<template>
<div v-loading="loading" class="radar-container">
<iframe id="companyIframe" class="radar-iframe" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" width="100%" :src="src" />
</div>
</template>
<script>
import { steerScroll } from '@/assets/js/jskplug';
import { dskAccessToken } from '@/api/common';
import { encodeStr } from "@/assets/js/common";
import MaxPageSizeTip from "@/views/components/MaxPageSizeTip.vue";
import { getUipIdByCid } from '@/api/macro/macro';
export default {
name: 'Enterprise',
components: {
MaxPageSizeTip
},
data() {
return {
encodeStr,
loading: false, // 是否加载完成-当前页控制
iframeTimer: '', // 是否加载中定时器-当前页控制
footHeight: 0, //底部高度，若为0（页面内部嵌套或者没有底部板块）
iframeHight: `${window.innerHeight}px`, // iframe高度-当前页控制
navigation: { isFixed: true, fixedHeight: 56, totalHeight: 68 }, // iframe之外页面顶部对象，ifFixed:是否浮动；fixedHeight：浮动对象高度；totalHeight：顶部整体高度
src: '', //iframe嵌套页面地址
domain: 'https://plug.jiansheku.com', // 插件地址
// domain: 'https://pre-plug.jiansheku.com', // 插件地址测试
// domain: 'http://192.168.60.104:3400',
ak: 'aec7b3ff2y2q8x6t49a7e2c463ce21912', // 需要携带的sdkId
timelongs: 7200,//刷新token时间
tokentimer: null,
showMaxPageTip: false,
iframeIns: null,
};
},
created() {
this.domain = process.env.VUE_APP_SUB_SYSTEM_ADDRESS;
this.gettokens();
this.iframeObserver();
let that = this;
window.addEventListener("message", this.pagecapListener, { passive: true });
window.addEventListener('message', this.linkListener, false);
},
mounted() {
this.iframeLoading(); // 判断iframe页面是否加载完成-当前页控制
// steerScroll('companyIframe', this.navigation, this.footHeight, true); // iframeId: iframe的id；navigation:页面排除iframe后剩下的顶部高度；footHeight: 页面排除iframe后剩下的底部高度；state:监听or移除监听；parentId: 父级id[不带默认就是铺满整个页面]];_this:指向当前实例（可忽略）
},
beforeDestroy() {
clearInterval(this.iframeTimer); // -当前页控制
steerScroll('companyIframe', this.navigation, this.footHeight); // iframeId: iframe的id；navigation:页面排除iframe后剩下的顶部高度；footHeight: 页面排除iframe后剩下的底部高度；state:监听or移除监听；parentId: 父级id[不带默认就是铺满整个页面]];_this:指向当前实例（可忽略）
clearInterval(this.tokentimer);
window.removeEventListener("message", this.pagecapListener, { passive: true });
window.removeEventListener("message", this.linkListener);
// 移除layout样式
this.iframeIns?.contentWindow ? this.iframeIns.contentWindow.postMessage("removeHtmlLayoutStyle", { targetOrigin: this.domain, }) : null;
},
methods: {
linkListener(event) {
let { data, origin } = event;
if (origin != this.domain) return;
if (data.id) {
getUipIdByCid([data.id]).then(res => {
if (res.code == 200) {
if (res.data && res.data.length > 0 && res.data[0].uipId) {
this.$router.push({ path: '/enterprise/' + this.encodeStr(data.id) });
} else {
this.$tab.openPage(data.title, '/company/' + this.encodeStr(data.id));
}
}
}).catch(error => {
});
} else {
if (data.url) {
this.$tab.openPage(data.title, data.url);
}
}
},
async iframeObserver() {
try {
await this.$nextTick();
this.iframeIns = document.querySelector(".radar-iframe");
} catch (error) {
console.log(error);
}
},
// 列表翻页上限
pagecapListener(e) {
const { origin, data } = e;
if (origin != this.domain) return;
if (data == "pageCurrentMaxSize") {
this.$maxTip("您可通过筛选工具来查询数据～若有更多需求请联系客服 0262798729！").then(({ done, uid }) => {
done();
});
}
},
gettokens() {
dskAccessToken().then(res => {
if (res.code == 200) {
this.timelongs = res.data.expire;
this.ak = res.data.accessToken;
this.src = `${this.domain}/radar?ak=${this.ak}&initTime=${new Date().getTime()}&uid=${this.ak}&origin=${window.location.origin}`;
this.refreshtoken();
} else {
clearTimeout(this.tokentimer);
}
});
},
refreshtoken() {
this.tokentimer = setTimeout(() => {
dskAccessToken().then(res => {
if (res.code == 200) {
this.timelongs = res.data.expire;
this.ak = res.data.accessToken;
let ifam = document.getElementById('companyIframe'); //iframe的id
let akObj = res.data.expire; //accessToken接口的返回值
let initTime = new Date().getTime(); //accessToken接口返回后的当前时间戳
ifam.contentWindow.postMessage({ 'accessToken': akObj.accessToken, 'initTime': initTime }, '*');
} else {
clearTimeout(this.tokentimer);
}
});
}, this.timelongs * 1000);
},
//判断iframe页面是否加载完成-当前页控制
iframeLoading() {
let iframeHeight = document.getElementById("companyIframe").clientHeight, number = 0;
this.iframeTimer = setInterval(() => {
number++;
if (document.getElementById("companyIframe").clientHeight != iframeHeight || number == 5000) {
this.loading = false;
clearInterval(this.iframeTimer);
}
});
}
}
};
</script>
<style lang="scss" scoped>
.radar-container {
width: 100%;
height: 100%;
padding: 16px 24px;
/*padding-right: 15px;*/
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
.radar-iframe {
width: 100%;
height: 100%;
}
}
</style>
dsk-operate-ui/src/views/register.vue
View file @ 798456ab
<template> <template>
<div class="register"> <div class="register">
<el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form"> <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
<h3 class="title">数字化经营履约全生命链路管理系统 </h3> <h3 class="title">中铁二十局市场经营信息服务系统 </h3>
<el-form-item prop="username"> <el-form-item prop="username">
<el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号"> <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="账号">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
......
dsk-operate-ui/vue.config.js
View file @ 798456ab
...@@ -7,7 +7,7 @@ function resolve(dir) { ...@@ -7,7 +7,7 @@ function resolve(dir) {
const CompressionPlugin = require('compression-webpack-plugin'); const CompressionPlugin = require('compression-webpack-plugin');
const name = process.env.VUE_APP_TITLE || '数字化经营履约全生命链路管理系统'; // 网页标题 const name = process.env.VUE_APP_TITLE || '中铁二十局市场经营信息服务系统'; // 网页标题
const port = process.env.port || process.env.npm_config_port || 80; // 端口 const port = process.env.port || process.env.npm_config_port || 80; // 端口
// vue.config.js 配置说明 // vue.config.js 配置说明
...@@ -35,7 +35,9 @@ module.exports = { ...@@ -35,7 +35,9 @@ module.exports = {
proxy: { proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy // detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: { [process.env.VUE_APP_BASE_API]: {
target: `http://120.46.64.239:9099/prod-api`,//测试 // target: `http://120.46.64.239:9099/prod-api`,//测试
target: `http://123.60.218.188:9099/prod-api`,//中铁二十局测试
// target: `http://123.60.218.188:9097/prod-api`,//中铁二十局线上
// target: `https://szhapi.jiansheku.com`,//线上 // target: `https://szhapi.jiansheku.com`,//线上
// target: `http://122.9.160.122:9011`, //线上 // target: `http://122.9.160.122:9011`, //线上
// target: `http://192.168.0.165:9098`,//施-无线 // target: `http://192.168.0.165:9098`,//施-无线
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment