<template>
<div class="full-box data-service" style="overflow: hidden">
<div class="" style="width: 100%;height:100%;">
<div class="top-tip-box t-title">当前位置：数据服务<span v-if="detailTableShow" > - {{detailTableName}}</span>
<el-button class="back-btn" type="primary" v-if="detailTableShow" @click="detailTableShow = false">返回</el-button>
</div>
<div class="table-info-box">
<div class="ds-search-box">
<div class="ds-top-line">
<div class="tl-left"></div>
<div class="tl-icon">查询条件</div>
<div class="tl-right"></div>
</div>
<div class="ds-info">
<div class="sl-row ds-row">
<div class="sl-row-label">企业名称</div>
<el-input v-model="filter.companyName" placeholder="请输入内容" style="width:calc(100% - 70px);float: left;"></el-input>
</div>
<div class="line-dashed"></div>
<div class="search-row-check">
<div class="search-row-check-label">所属区域
<el-checkbox class="search-condition-checkall" :indeterminate="checkObj.bkCheckObj.isIndeterminate" v-model="checkObj.bkCheckObj.checkAll" @change="(value) => handleCheckAllChange(value,'bkCheckObj')">全选</el-checkbox>
</div>
<div class="search-row-check-box">
<el-checkbox-group v-model="checkObj.bkCheckObj.checkedList" @change="(value) => handleCheckedChange(value,'bkCheckObj')">
<el-checkbox v-for="item in checkObj.bkCheckObj.checkList" :label="item.value" :key="item.value">{{item.name}}</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="line-dashed"></div>
<div class="search-row-check">
<div class="search-row-check-label">所属行业
<el-checkbox class="search-condition-checkall" :indeterminate="checkObj.hyCheckObj.isIndeterminate" v-model="checkObj.hyCheckObj.checkAll" @change="(value) => handleCheckAllChange(value,'hyCheckObj')">全选</el-checkbox>
</div>
<div class="search-row-check-box">
<el-checkbox-group v-model="checkObj.hyCheckObj.checkedList" @change="(value) => handleCheckedChange(value,'hyCheckObj')">
<el-checkbox v-for="item in checkObj.hyCheckObj.checkList" :label="item.value" :key="item.value">{{item.name}}</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="line-dashed"></div>
<div class="search-row-check">
<div class="search-row-check-label">企业标签
<el-checkbox class="search-condition-checkall" :indeterminate="checkObj.gmCheckObj.isIndeterminate" v-model="checkObj.gmCheckObj.checkAll" @change="(value) => handleCheckAllChange(value,'gmCheckObj')">全选</el-checkbox></div>
<div class="search-row-check-box">
<el-checkbox-group v-model="checkObj.gmCheckObj.checkedList" @change="(value) => handleCheckedChange(value,'gmCheckObj')">
<el-checkbox v-for="item in checkObj.gmCheckObj.checkList" :label="item.value" :key="item.value">{{item.name}}</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="line-dashed"></div>
<div class="search-row-check">
<div class="search-row-check-label">经济指标</div>
<div class="search-row-check-box">
<el-radio-group v-model="filter.economicIndicators">
<el-radio v-for="item in jjzbRadioList" :label="item.id" :key="item.id">{{item.name}}</el-radio>
</el-radio-group>
</div>
</div>
<div class="line-dashed"></div>
<div class="sl-row ds-row">
<div class="sl-row-label">开始时间</div>
<el-date-picker
type="month"
:picker-options="beginDate(filter.endDate)"
v-model="filter.startDate"
placeholder="开始日期"
value-format="yyyy-MM"
style="width:calc(100% - 70px);float: left;">
</el-date-picker>
</div>
<div class="sl-row ds-row">
<div class="sl-row-label">结束日期</div>
<el-date-picker
type="month"
:picker-options="processDate(filter.startDate)"
v-model="filter.endDate"
placeholder="结束日期"
value-format="yyyy-MM"
style="width:calc(100% - 70px);float: left;">
</el-date-picker>
</div>
<div class="line-dashed"></div>
<div class="operate-box">
<el-button class="search-btn" type="primary" @click="searchresult">查询</el-button>
<el-button class="search-btn" type="primary" @click="resetFilter">重置</el-button>
</div>
</div>
<div class="ds-bottom-line">
<div class="bl-left"></div>
<div class="bl-right"></div>
</div>
</div>
<div class="table-result-boxx" v-if="!detailTableShow">
<div class="table-container-style">
<el-table :data="tableData.list" height="200">
<el-table-column type="index" align="center" label="序号" width="80"></el-table-column>
<el-table-column prop="dataTime" align="center" label="数据日期" ></el-table-column>
<el-table-column prop="companyName" align="center" label="企业名称" show-overflow-tooltip ></el-table-column>
<el-table-column prop="plate" align="center" label="所属区域"></el-table-column>
<el-table-column prop="industryName" align="center" label="所属行业"></el-table-column>
<el-table-column prop="economicIndicators" align="center" label="经济指标值(千元)" ></el-table-column>
<el-table-column prop="yearUp" align="center" label="同比增幅" ></el-table-column>
<el-table-column prop="" align="center" label="操作">
<template slot-scope="scope">
<div class="table-edit-btn" @click="detailTable(scope.row)">详情</div>
</template>
</el-table-column>
</el-table>
<el-pagination @current-change="handlePageChange" background layout="total, prev, pager, next" :total="tableData.total" :current-page="tableData.pageNum" :page-size="tableData.pageSize" :page-count="tableData.pages" style="text-align: right;"></el-pagination>
</div>
</div>
<!-- pop start 企业信息 - 企业的基本信息以及四个经济指标（工业总产值、主营业务收入、利税总额、利润总额 -->
<transition name="el-zoom-in-bottom">
<div class="table-result-boxx" style="height: calc(100% - 0px);display: flex;" v-if="detailTableShow">
<div class="table-container-style">
<el-table :data="detailTableData.list" height="200">
<el-table-column type="index" align="center" label="序号" width="80"></el-table-column>
<el-table-column prop="dataTime" align="center" label="数据日期"></el-table-column>
<el-table-column prop="companyCode" align="center" label="组织机构代码"></el-table-column>
<el-table-column prop="companyName" align="center" label="企业名称" min-width="180"></el-table-column>
<el-table-column prop="plat" align="center" label="所属板块"></el-table-column>
<el-table-column prop="industryName" align="center" label="所属行业"></el-table-column>
<el-table-column prop="czLj" align="center" label="工业总产值" ></el-table-column>
<el-table-column prop="czbytb" align="center" label="产值增幅%" ></el-table-column>
<el-table-column prop="srLj" align="center" label="主营业务收入" ></el-table-column>
<el-table-column prop="sjLj" align="center" label="利税总额" ></el-table-column>
<el-table-column prop="lrLj " align="center" label="利润总额" ></el-table-column>
</el-table>
<el-pagination @current-change="detailhandlePageChange" background layout="total, prev, pager, next" :total="detailTableData.total" :current-page="detailTableData.pageNum" :page-size="detailTableData.pageSize" :page-count="detailTableData.pages" style="text-align: right;"></el-pagination>
</div>
</div>
</transition>
<!-- pop end-->
</div>
</div>
</div>
</template>
<script>
const currentDate = new Date('2020/12/31')
let month = currentDate.getMonth()+1;
let year = month<10?currentDate.getFullYear()+"-0"+month :currentDate.getFullYear()+"-"+month;
let threeMouth = new Date('2020/12/31').setMonth(currentDate.getMonth() - 3);
export default {
name: 'dataService',
data () {
return {
timeFilter:[new Date().format("yyyy-")+"01",new Date().format("yyyy-MM")],
filter:{
economicIndicators:'cz',
companyName:'',
/*startDate: new Date(threeMouth).format("yyyy-MM"),
endDate:new Date().format("yyyy-MM"),*/
startDate:new Date(threeMouth).format("yyyy-MM"),
endDate:currentDate.format("yyyy-MM"),
plates:'',
industries:'',
scales:'',
},
jjzbRadioList:[{id:'cz',name:'工业总产值'},{id:'sr',name:'主营业务收入'},{id:'ls',name:'利税总额'},{id:'lr',name:'利润总额'},],
checkObj:{
bkCheckObj:{isIndeterminate: false,checkList: [{id:11,name:'渊山岗工业园'}],checkedList: [],checkAll: false},
hyCheckObj:{isIndeterminate: false,checkList: [{id:21,name:'新兴产业'}],checkedList: [],checkAll: false},
gmCheckObj:{isIndeterminate: false,checkList: [{id:21,name:'大型企业'}],checkedList: [],checkAll: false}
},
tableData:{list:[],pageNum: 1,pageSize: 10,pages: 0,total: 0},
detailTableShow:false,
detailTableName:'',
detailTableData: {list:[],pageNum: 1,pageSize: 10,pages: 0,total: 0},
detailTableRowData:{},
}
},
mounted (){},
created(){
this.GLOBAL.app.getDictList(resp => {
this.checkObj.bkCheckObj.checkList = resp["板块"];
this.checkObj.hyCheckObj.checkList = resp["行业列表"];
this.checkObj.gmCheckObj.checkList = resp["企业规模"];
})
this.getList(1);
},
watch:{},
methods:{
searchresult(){
this.getList(1);
},
resetFilter(){
let vm = this;
vm.filter = { economicIndicators:'cz',ompanyName:'',startDate: new Date(threeMouth).format("yyyy-MM"), endDate:new Date().format("yyyy-MM")};
vm.checkObj.bkCheckObj.isIndeterminate = false;vm.checkObj.bkCheckObj.checkedList = [];vm.checkObj.bkCheckObj.checkAll = false;
vm.checkObj.hyCheckObj.isIndeterminate = false;vm.checkObj.hyCheckObj.checkedList = [];vm.checkObj.hyCheckObj.checkAll = false;
vm.checkObj.gmCheckObj.isIndeterminate = false;vm.checkObj.gmCheckObj.checkedList = [];vm.checkObj.gmCheckObj.checkAll = false;
},
getList(pager){
let vm = this;
let timeStart = !vm.$Util.isEmpty(vm.filter.startDate) ? vm.filter.startDate.split("-")[0] : null,
timeEnd = !vm.$Util.isEmpty(vm.filter.endDate) ? vm.filter.endDate.split("-")[0] : null;
if(timeStart == null || timeEnd== null || timeStart > timeEnd || timeStart <timeEnd){
let dataText = timeStart == null ? '请选择开始时间':timeEnd ==null ? '请选择结算时间':'支持查询同一年数据，请选择起止时间为同一年后查询！';
vm.$message({
showClose: true,
message: dataText,
type: 'warning'
});
return;
}
vm.detailTableShow = false;
vm.filter.plates = vm.checkObj.bkCheckObj.checkedList.join(",");
vm.filter.industries = vm.checkObj.hyCheckObj.checkedList.join(",");
vm.filter.scales = vm.checkObj.gmCheckObj.checkedList.join(",");
vm.tableData.pageNum = vm.$Util.isEmpty(pager) ? vm.tableData.pageNum : pager;
vm.$http.get('/dx-economy-api/dataService', {params: $.extend({pageNum: vm.tableData.pageNum,pageSize: vm.tableData.pageSize},vm.filter)}).then(function (resp) {
let _data = resp.data.data;
let dataList = _data.pages.list;
dataList.unshift(_data.total);
vm.tableData.list = dataList;
vm.tableData.pageNum = _data.pages.pageNum;
vm.tableData.pageSize = _data.pages.pageSize;
vm.tableData.pages = _data.pages.pages;
vm.tableData.total = _data.pages.total;
})
},
handlePageChange: function (page) {
this.getList(page);
},
handleCheckAllChange(value,type){
let _this = this,obj = _this.checkObj[type],_list = [];
if(value){
obj.checkList.forEach(item => {
_list.push(item.value);
});
}
obj.checkedList = _list;
obj.isIndeterminate = false;
},
handleCheckedChange(value,type) {
let _this = this,obj = _this.checkObj[type];
obj.checkAll = value.length === obj.checkList.length;
obj.isIndeterminate = value.length > 0 && value.length < obj.checkList.length;
},
handleAreaCheckAllChange(value){
let _this = this,obj = _this.bkCheckObj,_list = [];
if(value){
obj.checkList.forEach(item => {
_list.push(item.id);
});
}
obj.checkedList = _list;
obj.isIndeterminate = false;
},
handleCheckedChangebk(value) {
let _this = this,obj = _this.bkCheckObj;
obj.checkAll = value.length === obj.checkList.length;
obj.isIndeterminate = value.length > 0 && value.length < obj.checkList.length;
},
searchResult(){},
reset(){
this.filter.zbTypeValue=''
this.timeFilter = [new Date().format("yyyy-")+"01",new Date(year).format("yyyy-MM")];
},
/*优化内容 -数据moredetail*/
detailTable(rowData){
let vm = this
vm.detailTableShow = true;
vm.detailTableName = rowData.companyName;
vm.detailTableRowData = rowData;
/*vm.tableHead = JSON.parse(rowData.title);
vm.detailTableData = JSON.parse(rowData.content);*/
this.getDetailList();
},
detailhandlePageChange(pager){
this.getDetailList(pager);
},
getDetailList(pager){
let vm = this;
vm.detailTableData.pageNum = vm.$Util.isEmpty(pager) ? vm.detailTableData.pageNum : pager;
let params = {
companyCode : vm.detailTableRowData.companyCode,
pageNum: vm.detailTableData.pageNum,
pageSize: vm.detailTableData.pageSize
}
vm.$http.get('/dx-economy-api/dataService/detail', {params:params}).then(function (resp) {
let _data = resp.data.data;
vm.detailTableData.list = _data.list;
vm.detailTableData.pageNum = _data.pageNum;
vm.detailTableData.pageSize = _data.pageSize;
vm.detailTableData.pages = _data.pages;
vm.detailTableData.total = _data.total;
})
},
}
}
</script>
<style></style>
<style scoped>
.ds-search-box{width:320px;height: 100%;;;float: left;}
.ds-top-line{width:calc(100% - 2px);height: 37px;border-left:1px solid rgba(7,182,255,.9);border-right:1px solid rgba(7,182,255,.9);}
.ds-top-line > div{float: left}
.tl-left{width:40px;height:36px;border-top:1px solid rgba(7,182,255,.9);}
.tl-icon{width:132px;height: 37px;line-height:34px;font-size: 16px;text-align: center;background: url(../../assets/images/title.png) no-repeat center;}
.tl-right{width:calc(100% - 172px);height:36px;border-top:1px solid rgba(7,182,255,.9);}
.ds-bottom-line{width:calc(100% - 1px);height: 20px;border-left:1px solid rgba(7,182,255,.9);}
.ds-bottom-line > div{float: left;}
.bl-left{width: calc(100% - 21px);height:19px;border-bottom:1px solid rgba(7,182,255,.9);}
.bl-right{width:21px;height: 20px;text-align: center;background: url(../../assets/images/roles.png) no-repeat center;}
.ds-info{width: calc(100% - 32px);padding:10px 15px 0;height:calc(100% - 67px);border-left:1px solid rgba(7,182,255,.9);border-right:1px solid rgba(7,182,255,.9);overflow-y: auto;}
.line-dashed{width: 100%;height: 1px;margin:10px auto;border-bottom:1px dashed rgba(255,255,255,.8);}
.data-service .search-item{width: 100%;}
.search-row-check{width: 100%;height: auto;}
.search-row-check-label{width: 100%;height:22px;line-height: 22px;color:#07b6ff;margin-bottom:8px;}
.search-row-check-box{width: 100%;height: auto;}
.search-row-check-label .search-condition-checkall{margin-left: 20px;}
.el-checkbox-group .el-checkbox{margin-left: 0px;margin-right:10px;height:26px;line-height:26px;}
.el-checkbox-group .el-checkbox+.el-checkbox:nth-child(2n + 1){}
.data-service .el-radio{margin-left: 0px;margin-right: 10px;height:26px;line-height:26px;}
.data-service .el-radio__inner::after{background: rgba(255,255,255,0)}
.sl-row.ds-row .sl-row-label{width:65px;font-weight: normal;color:#07b6ff;}
.operate-box{width: 180px;margin:0 auto;}
.table-result-boxx{width: calc(100% - 340px);float: right;height:calc(100%);margin-top: 0px;}
.back-btn{height:28px;float:right;margin-top:5px;line-height: 28px;padding: 0 20px;border-radius: 0;border: 1px solid #fff;background: rgba(7,182,255,0.1);margin-left:20px;}
</style>
