Skip to content

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

中铁二十局

parent f6c0a3b8
Show 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,7 +8,7 @@ ENV = 'test' ...@@ -8,7 +8,7 @@ ENV = 'test'
# 数字化经营履约全生命链路管理系统/测试环境 # 中铁二十局市场经营信息服务系统/测试环境
VUE_APP_BASE_API = '/prod-api' VUE_APP_BASE_API = '/prod-api'
# 子系统地址 # 子系统地址
......
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
...@@ -206,7 +206,10 @@ ...@@ -206,7 +206,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>
</div> </div>
<div class="title-right"> <div class="title-right">
...@@ -217,6 +220,22 @@ ...@@ -217,6 +220,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>
...@@ -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,6 +347,7 @@ import jsk_data from '../../../../../public/jsk.json'; ...@@ -305,6 +347,7 @@ 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},
...@@ -378,7 +421,6 @@ export default { ...@@ -378,7 +421,6 @@ export default {
PlanTenderDateValue: "", PlanTenderDateValue: "",
PlanTenderDate: "", PlanTenderDate: "",
PlanTenderDateShowPopper: false, PlanTenderDateShowPopper: false,
addressList: [], addressList: [],
addressType: [], addressType: [],
props: { props: {
...@@ -390,7 +432,8 @@ export default { ...@@ -390,7 +432,8 @@ export default {
projectTypeList: [],//项目类型 projectTypeList: [],//项目类型
tenderWayList: [],//招标方式 tenderWayList: [],//招标方式
projectCapitalSourceList: [],//资金来源 projectCapitalSourceList: [],//资金来源
planTenderAmount: [{ planTenderAmount: [
{
value: "不限", value: "不限",
label: "不限", label: "不限",
}, },
...@@ -433,20 +476,21 @@ export default { ...@@ -433,20 +476,21 @@ export default {
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: {
...@@ -553,7 +597,6 @@ export default { ...@@ -553,7 +597,6 @@ export default {
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;
...@@ -592,7 +635,6 @@ export default { ...@@ -592,7 +635,6 @@ export default {
} }
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;
...@@ -600,6 +642,28 @@ export default { ...@@ -600,6 +642,28 @@ export default {
}).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 => {
});
}, },
...@@ -928,7 +992,6 @@ export default { ...@@ -928,7 +992,6 @@ export default {
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 = [],
...@@ -1059,7 +1122,405 @@ export default { ...@@ -1059,7 +1122,405 @@ export default {
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
...@@ -177,7 +177,10 @@ ...@@ -177,7 +177,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>
</div> </div>
<div class="title-right"> <div class="title-right">
...@@ -187,6 +190,22 @@ ...@@ -187,6 +190,22 @@
</p> </p>
</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>
<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="">
...@@ -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,13 +687,35 @@ ...@@ -642,13 +687,35 @@
}; };
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;
} }
}).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 => {
}); });
}, },
...@@ -1154,6 +1221,414 @@ ...@@ -1154,6 +1221,414 @@
} }
} }
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();//图表跟随页面大小变化宽度
});
})
}, },
}, },
}; };
...@@ -1246,7 +1721,6 @@ ...@@ -1246,7 +1721,6 @@
.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;
...@@ -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,12 +199,15 @@ ...@@ -199,12 +199,15 @@
</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>条结果
<span style="padding-left: 12px;">
土地成交总额：<span style="color:#E6A23C;padding-right: 6px;">{{sumMoney}}万元</span>
土地成交总面积：<span style="color:#E6A23C;">{{sumArea}}m²</span>
</span>
</p> </p>
<el-popover v-model="fieldshow" placement="bottom-start" trigger="click" <el-popover v-model="fieldshow" placement="bottom-start" trigger="click"
popper-class="viewlist-el-popover"> popper-class="viewlist-el-popover">
...@@ -228,6 +231,22 @@ ...@@ -228,6 +231,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>
...@@ -300,9 +319,27 @@ ...@@ -300,9 +319,27 @@
: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-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,7 +1465,6 @@ ...@@ -1041,7 +1465,6 @@
.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;
...@@ -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
...@@ -179,7 +179,10 @@ ...@@ -179,7 +179,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>
</div> </div>
<div class="title-right"> <div class="title-right">
...@@ -189,6 +192,22 @@ ...@@ -189,6 +192,22 @@
</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>
...@@ -279,10 +298,32 @@ ...@@ -279,10 +298,32 @@
: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: [],
...@@ -569,7 +617,8 @@ ...@@ -569,7 +617,8 @@
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,
...@@ -629,7 +679,11 @@ ...@@ -629,7 +679,11 @@
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(){
...@@ -797,13 +848,34 @@ ...@@ -797,13 +848,34 @@
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 => {
}); });
}, },
...@@ -1138,6 +1210,405 @@ ...@@ -1138,6 +1210,405 @@
}); });
}, },
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>
...@@ -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 {
......
dsk-operate-ui/src/views/radar/components/debtProject/index.vue
View file @ 798456ab
...@@ -80,20 +80,20 @@ ...@@ -80,20 +80,20 @@
</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>条结果
<span style="padding-left: 12px;">
项目投资总额：<span style="color:#E6A23C;">{{sumMoney}}万元</span>
</span>
</p> </p>
</div> </div>
<div class="title-right"> <div class="title-right">
...@@ -103,6 +103,22 @@ ...@@ -103,6 +103,22 @@
</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>
...@@ -175,9 +191,32 @@ ...@@ -175,9 +191,32 @@
</el-pagination> </el-pagination>
</div> </div>
</template> </template>
</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>
<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>
...@@ -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,7 +236,8 @@ ...@@ -196,7 +236,8 @@
encodeStr, encodeStr,
isSkeleton:true, isSkeleton:true,
projectName:'', projectName:'',
nameTypeList: [{ nameTypeList: [
{
key: 'like', key: 'like',
status: true , status: true ,
value: '模糊搜索', value: '模糊搜索',
...@@ -209,7 +250,8 @@ ...@@ -209,7 +250,8 @@
], ],
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() {
...@@ -506,7 +548,6 @@ ...@@ -506,7 +548,6 @@
} }
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;
...@@ -514,7 +555,29 @@ ...@@ -514,7 +555,29 @@
}).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;
...@@ -584,11 +647,413 @@ ...@@ -584,11 +647,413 @@
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)
} }
</script> }
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>
<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;
...@@ -683,7 +1148,6 @@ ...@@ -683,7 +1148,6 @@
.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;
...@@ -724,7 +1188,6 @@ ...@@ -724,7 +1188,6 @@
} }
} }
.bottomlist-content{ .bottomlist-content{
padding-bottom: 0px; padding-bottom: 0px;
} }
.bottomlist-list{ .bottomlist-list{
...@@ -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;
}
}
}
.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/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
...@@ -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