Commit 54caecf3 authored by Star970321's avatar Star970321

修改

parent d519fa32
......@@ -351,6 +351,10 @@ export default {
position: relative;
cursor: pointer;
min-width: 128px;
max-width: 400px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 32px;
line-height: 32px;
color: #495060;
......
......@@ -47,11 +47,11 @@ export const constantRoutes = [
component: () => import('@/views/login'),
hidden: true
},
// {
// path: '/register',
// component: () => import('@/views/register'),
// hidden: true
// },
{
path: '/register',
component: () => import('@/views/register'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/error/404'),
......@@ -62,20 +62,33 @@ export const constantRoutes = [
component: () => import('@/views/error/401'),
hidden: true
},
// {
// path: '/macro',
// component: Layout,
// hidden: true,
// // redirect: 'urban',
// children: [
// {
// path: 'urban',
// component: () => import('@/views/macro/urban'),
// name: 'Urban',
// meta: { title: '城投平台', icon: 'macro' }
// }
// ]
// },
{
path: '',
component: Layout,
redirect: 'index',
children: [
{
path: 'index',
component: () => import('@/views/index'),
name: 'Index',
meta: { title: '首页', icon: 'index', noCache: true }
}
]
},
{
path: '',
component: Layout,
hidden: true,
redirect: 'urban',
children: [
{
path: '/macro/urban',
component: () => import('@/views/macro/urban'),
name: 'Urban',
meta: { title: '城投平台', icon: 'macro' }
}
]
},
// {
// path: '',
// component: Layout,
......@@ -90,6 +103,20 @@ export const constantRoutes = [
// }
// ]
// },
{
path: '',
component: Layout,
hidden: true,
redirect: 'urban',
children: [
{
path: '/macro/urban',
component: () => import('@/views/macro/urban'),
name: 'Urban',
meta: { title: '城投平台', icon: 'macro' }
}
]
},
{
path: '/user',
component: Layout,
......@@ -100,7 +127,7 @@ export const constantRoutes = [
path: 'profile',
component: () => import('@/views/system/user/profile/index'),
name: 'Profile',
meta: { title: '个人中心', icon: 'user', noCache: true }
meta: { title: '个人中心', icon: 'user',noCache: true }
}
]
},
......@@ -134,26 +161,26 @@ export const constantRoutes = [
]
},
{
path: '/JumpPage.html',
path: '',
component: Layout,
hidden: true,
redirect: '/JumpPage.html',
redirect: 'noredirect',
children: [
{
path: '',
path: '/JumpPage.html',
component: () => import('@/views/detail'),
}
]
},
//乙方-企业详情
{
path: '/company/:id',
path: '/company',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/company/:id',
component: () => import('@/views/detail'),
name: 'Company',
meta: { title: '企业详情' }
......@@ -162,104 +189,104 @@ export const constantRoutes = [
},
//企业详情-业绩
{
path: '/company/:id/performance',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/company/:id/performance',
component: () => import('@/views/detail'),
}
]
},
//企业详情-人员
{
path: '/company/:id/personnel',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/company/:id/personnel',
component: () => import('@/views/detail'),
}
]
},
//企业详情-经营信息
{
path: '/company/:id/business',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/company/:id/business',
component: () => import('@/views/detail'),
}
]
},
//企业详情-良好行为
{
path: '/company/:id/behavior',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/company/:id/behavior',
component: () => import('@/views/detail'),
}
]
},
//企业详情-信用评价
{
path: '/company/:id/evaluation',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/company/:id/evaluation',
component: () => import('@/views/detail'),
}
]
},
//企业详情-信用行为
{
path: '/company/:id/credit',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/company/:id/credit',
component: () => import('@/views/detail'),
}
]
},
//企业详情-股权
{
path: '/company/:id/lt',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/company/:id/lt',
component: () => import('@/views/detail'),
}
]
},
//人员详情
{
path: '/personnel/:id.html',
path: '/personnel',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/personnel/:id.html',
component: () => import('@/views/detail'),
name: 'Personnel',
meta: { title: '人员详情' }
......@@ -282,13 +309,13 @@ export const constantRoutes = [
},
//公招市场详情
{
path: '/gzsc/:id',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/gzsc/:id',
component: () => import('@/views/detail'),
name: 'detail-gzsc',
meta: { title: "公招市场详情" }
......@@ -297,226 +324,316 @@ export const constantRoutes = [
},
//中标业绩详情
{
path: '/performance/zb/:id.html',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/performance/zb/:id.html',
component: () => import('@/views/detail'),
}
]
},
//荣誉详情
{
path: '/honor/:id.html',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/honor/:id.html',
component: () => import('@/views/detail'),
}
]
},
//标讯Pro-招标公告
{
path: '/bxpro/:id.html',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/bxpro/:id.html',
component: () => import('@/views/detail'),
}
]
},
//中标候选人
{
path: '/zbpro/:id.html',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/zbpro/:id.html',
component: () => import('@/views/detail'),
}
]
},
//开标记录
{
path: '/biz/tbjl/:id.html',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/biz/tbjl/:id.html',
component: () => import('@/views/detail'),
}
]
},
//一体化详情
{
path: '/performance/sjyth/:id.html',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/performance/sjyth/:id.html',
component: () => import('@/views/detail'),
}
]
},
//一体化详情
{
path: '/performance/yth/:id.html',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/performance/yth/:id.html',
component: () => import('@/views/detail'),
}
]
},
//四库详情
{
path: '/performance/sky/:id.html',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/performance/sky/:id.html',
component: () => import('@/views/detail'),
}
]
},
//公路系统详情
{
path: '/performance/glxt/:id.html',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/performance/glxt/:id.html',
component: () => import('@/views/detail'),
}
]
},
//公路系统详情
{
path: '/performance/xmzt/:id.html',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/performance/xmzt/:id.html',
component: () => import('@/views/detail'),
}
]
},
//水利详情
{
path: '/performance/slyj/:id.html',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/performance/slyj/:id.html',
component: () => import('@/views/detail'),
}
]
},
//江西住建云详情
{
path: '/performance/jxzjy/:id.html',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/performance/jxzjy/:id.html',
component: () => import('@/views/detail'),
}
]
},
//北京业绩详情
{
path: '/performance/bj/:id.html',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/performance/bj/:id.html',
component: () => import('@/views/detail'),
}
]
},
//云南业绩详情
{
path: '/performance/yn/:id.html',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/performance/yn/:id.html',
component: () => import('@/views/detail'),
}
]
},
//商机-标讯详情
{
path: '/biz/bx/:id.html',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/biz/bx/:id.html',
component: () => import('@/views/detail'),
}
]
},
//商机-土地交易详情
{
path: '/biz/tdjy/:id.html',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/biz/tdjy/:id.html',
component: () => import('@/views/detail'),
}
]
},
//商机-拟建项目详情
{
path: '/biz/njxm/:id.html',
path: '',
component: Layout,
hidden: true,
redirect: '',
redirect: 'noredirect',
children: [
{
path: '',
path: '/biz/njxm/:id.html',
component: () => import('@/views/detail'),
}
]
},
//商机-重点清单详情
{
path: '',
component: Layout,
hidden: true,
redirect: 'noredirect',
children: [
{
path: '/majorProject/detail/:id',
component: () => import('@/views/detail'),
}
]
},
//商机-政府专项债项目详情
{
path: '',
component: Layout,
hidden: true,
redirect: 'noredirect',
children: [
{
path: '/debtProject/detail/:id',
component: () => import('@/views/detail'),
}
]
},
//商机-土地交易详情
{
path: '',
component: Layout,
hidden: true,
redirect: 'noredirect',
children: [
{
path: '/land/detail/:id',
component: () => import('@/views/detail'),
}
]
},
//商机-拟建详情
{
path: '',
component: Layout,
hidden: true,
redirect: 'noredirect',
children: [
{
path: '/establishment/detail/:id',
component: () => import('@/views/detail'),
}
]
},
//商机-招标计划详情
{
path: '',
component: Layout,
hidden: true,
redirect: 'noredirect',
children: [
{
path: '/bidding/detail/:id',
component: () => import('@/views/detail'),
}
]
},
//商机-公招标讯详情
{
path: '',
component: Layout,
hidden: true,
redirect: 'noredirect',
children: [
{
path: '/tender/detail/:id',
component: () => import('@/views/detail'),
}
]
},
//商机-开标记录详情
{
path: '',
component: Layout,
hidden: true,
redirect: 'noredirect',
children: [
{
path: '/bidRecord/detail/:id',
component: () => import('@/views/detail'),
}
]
},
{
path: '/structure',
component: Layout,
......@@ -788,31 +905,6 @@ export const dynamicRoutes = [
}
];
/**
* 第三方登录首页
*/
export const isThirdPlatformRoutes = [
{
path: '',
component: Layout,
redirect: 'index',
children: [
{
path: 'index',
component: () => import('@/views/index'),
name: 'Index',
meta: { title: '首页', icon: 'index', noCache: true }
}
]
},
{
path: '',
component: Layout,
redirect: '/macro/nationalEconomies',
hidden: true
}
];
// 防止连续点击多次路由报错
let routerPush = Router.prototype.push;
let routerReplace = Router.prototype.replace;
......
......@@ -34,24 +34,36 @@ export function setBiAuth(token) {
/**
* 获取第三方app key
* @returns
* @param {*} onlyUrl 是否仅从url获取
* @returns
*/
export function getThirdPlatform() {
const platForm = sessionStorage.getItem("PLAT_FORM");
if (platForm) return platForm;
export function getThirdPlatform(onlyUrl = false) {
if (!onlyUrl) {
const platForm = sessionStorage.getItem("PLAT_FORM");
if (platForm) return platForm;
}
// sessiongStorage 未获取到appkey 寻找url上的参数
const { platFormKey } = getUrlSearchQuery();
if (platFormKey) {
return setThirdPlatform(platFormKey) ? platFormKey : "";
return platFormKey;
} else {
return "";
};
}
/**
* 检测 appkey是否存在变动
* @param {*} appkey
*/
export function checkThirdPlatformChange(appkey) {
const platForm = sessionStorage.getItem("PLAT_FORM");
return platForm !== appkey;
}
/**
* 储存第三方app key
* @param {*} appkey
* @returns
* @param {*} appkey
* @returns
*/
export function setThirdPlatform(appkey) {
try {
......
<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>
<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>
<template>
<div class="app-container">
<div class="content">
<div class="combined-title">
<div class="title-right">
<div class="tab">
<div style="position:relative" v-for="(itme,i) in personnelList"
:class="itme.status==true?'active':'' " :key='i' @click="personnelListbtn(i)">
<p>{{itme.value}}</p>
</div>
</div>
</div>
</div>
<p class="solid"></p>
</div>
<!-- 重点项目清单 -->
<MajorProject v-if="personnelHerf=='MajorProject'" />
<!-- 政府专项债 -->
<debtProject v-if="personnelHerf=='debtProject'" />
<!-- 土地交易 -->
<Land v-if="personnelHerf=='Land'" />
<!-- 拟建项目 -->
<Establishment v-if="personnelHerf=='Establishment'" />
<!-- 招标计划 -->
<Bidding v-if="personnelHerf=='Bidding'" />
<!-- 标讯pro -->
<!--<bxprozbgg v-if="personnelHerf=='bxprozbgg'" />-->
<!-- 公招标讯 -->
<Tender v-if="personnelHerf=='Tender'" />
<!-- 开标记录 -->
<BidRecord v-if="personnelHerf=='BidRecord'" />
</div>
<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 debtProject from "./components/debtProject/index.vue";
import Land from "./components/Land/index.vue";
import Establishment from "./components/Establishment/index.vue";
import bxprozbgg from "./components/bxprozbgg/index.vue";
import Tender from "./components/Tender/index.vue";
import BidRecord from "./components/BidRecord/index.vue";
import Bidding from "./components/Bidding/index.vue";
import MajorProject from "./components/MajorProject/index.vue";
import "@/assets/styles/public.scss";
export default {
name: 'Radar',
components: { MajorProject,debtProject,Land,Establishment,bxprozbgg,Tender,BidRecord,Bidding },
data() {
return {
personnelList: [
{
key: 'MajorProject',
status: true,
value: '重点项目清单',
},
{
key: 'debtProject',
status: false,
value: '政府专项债项目',
},
{
key: 'Land',
status: false,
value: '土地交易',
},
{
key: 'Establishment',
status: false,
value: '拟建项目',
},
{
key: 'Bidding',
status: false,
value: '招标计划',
},
// {
// key: 'bxprozbgg',
// status: false,
// value: '标讯pro',
//
// },
{
key: 'Tender',
status: false,
value: '公招标讯',
},
{
key: 'BidRecord',
status: false,
value: '开标记录',
},
],
personnelHerf:'MajorProject'
}
},
created() {
// console.log(this.$route.name)
},
methods: {
personnelListbtn(index) {
for (var i = 0; i < this.personnelList.length; i++) {
this.personnelList[i].status = false;
}
this.personnelList[index].status = true;
this.personnelHerf=this.personnelList[index].key;
},
}
}
<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>
.app-container {
margin: 12px 24px;
padding: 0;
}
.content{
padding: 0px 16px;
background: #FFFFFF;
}
.app-container .combined-title {
display: flex;
padding-top: 10px;
align-items: center
}
.app-container .combined-title .title-icon {
display: inline-block;
width: 6px;
height: 26px;
background: #1373D9;
border-radius: 0px 0px 0px 0px;
opacity: 1;
margin-right: 18px;
}
.app-container .combined-title .title-right {
display: flex;
width: 100%;
position: relative;
height: 40px;
}
.app-container .combined-title .title-right .title-text {
font-size: 16px;
font-weight: bold;
color: #333333;
line-height: 40px;
}
.app-container .combined-title .title-right .title-add {
color: #1373D9;
cursor: pointer;
position: absolute;
right: 0;
}
.app-container .combined-title .title-right .title-addyj {
top: 5px;
}
.app-container .combined-title .title-right .title-add .add-img {
position: relative;
top: -1px;
margin-right: 6px;
}
.app-container .content{
position: relative;
}
.app-container .solid {
width: 100%;
height: 1px;
background-color: #EEEEEE;
position: absolute;
bottom: -1px;
left: 0;
z-index: 1;
}
.tab {
display: flex;
z-index: 2;
}
.tab_p_32 {
padding-right: 32px;
padding-left: 32px;
}
.tab div {
cursor: pointer;
color: #666666;
font-size: 16px;
text-align: center;
margin-right: 32px;
line-height: 40px;
}
.tab div p {
display: inline-block;
padding: 0px;
}
.tab div .logo {
color: #fff;
font-weight: 400;
font-size: 10px;
position: absolute;
top: -6px;
right: -24px;
display: inline-block;
line-height: 14px;
padding: 1px 2px;
text-align: center;
background: #3663DE;
border-radius: 2px 2px 2px 2px;
}
.tab div .triangle {
display: inline-block;
width: 0px;
height: 0px;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 4px solid #3663DE;
position: absolute;
top: 9.5px;
right: -3px;
}
.tab .active {
color: #1373D9;
}
.tab .active .triangle {
border-top: 4px solid #1373D9;
}
.tab .active .logo {
background: #1373D9;
}
.tab .active p {
border-bottom: 2px solid #1373D9;
font-weight: bold;
}
.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>
<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>
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