|
|
@@ -1,27 +1,100 @@
|
|
|
<template>
|
|
|
- <div class="company">
|
|
|
+ <div class="company-box">
|
|
|
<!-- 搜索框 -->
|
|
|
- <div class="input-box">
|
|
|
- <img src="../../assets/search.png" alt="search" />
|
|
|
- <input type="text" placeholder="请输入企业名/人名" v-model="searchVal"/>
|
|
|
- <button>确定</button>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="chart-box">
|
|
|
- <div class="chart-title">按园区统计</div>
|
|
|
- <annular :list="annularList"></annular>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="chart-box" style="margin-top: 40px">
|
|
|
- <div class="chart-title">按行业统计</div>
|
|
|
- <singleBar :chartDataList="annularList"></singleBar>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="chart-box">
|
|
|
- <div class="chart-title">按纳税金额统计</div>
|
|
|
- <pie :list="annularList"></pie>
|
|
|
+ <div class="input-box">
|
|
|
+ <img src="../../assets/search.png" alt="search" />
|
|
|
+ <input type="text" placeholder="请输入企业名/人名" v-model="searchVal"/>
|
|
|
+ <button @click="searchSubmit(1)" v-show="searchTopFlag">确定</button>
|
|
|
+ <button @click="searchSubmit(0)" v-show="!searchTopFlag">取消</button>
|
|
|
+ </div>
|
|
|
+ <div class="search-val-box" v-show="!searchTopFlag">
|
|
|
+ <div v-for="(company, index) in companyList" :key="index" class="company" @click="goDetailPage(company.id)">
|
|
|
+ <div class="title">
|
|
|
+ <div class="logo" style="margin-right: 15px">
|
|
|
+ <img :src="company.pic_url" alt="logo" class="logo-img"/>
|
|
|
+ </div>
|
|
|
+ <div class="name">
|
|
|
+ {{ company.name }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ <div class="div">
|
|
|
+ <div class="info_t">法定代表人</div>
|
|
|
+ <div class="name" style="color: cornflowerblue;">
|
|
|
+ {{ company.representative || '-'}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="div">
|
|
|
+ <div class="info_t">注册资本</div>
|
|
|
+ {{ company.capital || '-'}}(万元)
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="div">
|
|
|
+ <div class="info_t">成立日期</div>
|
|
|
+ {{ company.found_date || '-' }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="chart-box" v-show="searchTopFlag">
|
|
|
+ <div class="chart-title">按园区统计</div>
|
|
|
+ <annular :list="annularList"></annular>
|
|
|
+ </div>
|
|
|
+ <div class="chart-box" style="margin-top: 40px" v-show="searchTopFlag">
|
|
|
+ <div class="chart-title">按行业统计</div>
|
|
|
+ <singleBar :chartDataList="annularList"></singleBar>
|
|
|
+ </div>
|
|
|
+ <div class="chart-box" v-show="searchTopFlag">
|
|
|
+ <div class="chart-title">按纳税金额统计</div>
|
|
|
+ <pie :list="annularList"></pie>
|
|
|
+ </div>
|
|
|
|
|
|
+ <div class="company-top-box" v-show="searchTopFlag">
|
|
|
+ <div class="cross-line">
|
|
|
+ <div>纳税top10企业</div>
|
|
|
+ <div>
|
|
|
+ <span>选择年份:</span>
|
|
|
+ <select name="" id="">
|
|
|
+ <option value="2020">2020</option>
|
|
|
+ <option value="2019">2019</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div >
|
|
|
+ <div class="top10-box">
|
|
|
+ <div v-for="(company, index) in companyListTop" :key="index" class="company" @click="goDetailPage(company.id)">
|
|
|
+ <div class="title">
|
|
|
+ <div class="logo" style="margin-right: 15px">
|
|
|
+ <img :src="company.pic_url" alt="" class="logo-img"/>
|
|
|
+ </div>
|
|
|
+ <div class="name">
|
|
|
+ {{ company.name || '-'}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ <div class="div">
|
|
|
+ <div class="info_t">法定代表人</div>
|
|
|
+ <div class="name" style="color: cornflowerblue;">
|
|
|
+ {{ company.representative || '-'}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="div">
|
|
|
+ <div class="info_t">注册资本</div>
|
|
|
+ {{ company.capital || '-'}}(万元)
|
|
|
+ </div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="div">
|
|
|
+ <div class="info_t">纳税金额</div>
|
|
|
+ {{ company.taxesMoney || '-'}}(万元)
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="companyList.length === 0 && !searchTopFlag" class="products">
|
|
|
+ <img src="../../assets/default.png" alt="" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -40,6 +113,8 @@
|
|
|
//这里存放数据
|
|
|
return {
|
|
|
searchVal:'',
|
|
|
+ searchTopFlag:true,
|
|
|
+ shareBaseUrl:"https://kiq.xazhima.com/",
|
|
|
annularList:[
|
|
|
{ value: 1048, name: '创新科技园' },
|
|
|
{ value: 735, name: '科技园' },
|
|
|
@@ -48,7 +123,33 @@
|
|
|
{ value: 300, name: '科技创业园' },
|
|
|
{ value: 623, name: '其他' }
|
|
|
],
|
|
|
-
|
|
|
+ companyListTop:[
|
|
|
+ {
|
|
|
+ id:'4',
|
|
|
+ name:"中国南方航空股份有限公司",
|
|
|
+ representative:'马须伦',
|
|
|
+ capital:'1776759.3',
|
|
|
+ taxesMoney:'1829',
|
|
|
+ pic_url:require('../../assets/default.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:'5',
|
|
|
+ name:"陕西东海岸进出口贸易有限公司",
|
|
|
+ representative:'侯世钦',
|
|
|
+ capital:'2000',
|
|
|
+ taxesMoney:'315',
|
|
|
+ pic_url:require('../../assets/default.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:'6',
|
|
|
+ name:"西安空港建设有限公司",
|
|
|
+ representative:'王峙尧',
|
|
|
+ capital:'5000',
|
|
|
+ taxesMoney:'246',
|
|
|
+ pic_url:require('../../assets/default.png')
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ companyList:[],
|
|
|
};
|
|
|
},
|
|
|
//监听属性 类似于data概念
|
|
|
@@ -57,30 +158,42 @@
|
|
|
watch: {},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
- tabShow:function(flag){
|
|
|
- this.tabFlag = flag;
|
|
|
- },
|
|
|
- selectClick(event) {
|
|
|
- this.activeName = event.target.value;
|
|
|
- switch (this.activeName) {
|
|
|
- case '当月':
|
|
|
- //this.runChartHttp('month');
|
|
|
- break;
|
|
|
- case '当年':
|
|
|
- //this.runChartHttp('year');
|
|
|
- break;
|
|
|
- case '去年':
|
|
|
- //this.runChartHttp('last');
|
|
|
- break;
|
|
|
- case '全部':
|
|
|
- // this.runChartHttp('all');
|
|
|
- break;
|
|
|
+ searchSubmit(type){
|
|
|
+ this.searchTopFlag = !this.searchTopFlag;
|
|
|
+ if(type){
|
|
|
+ this.topSearch()
|
|
|
}
|
|
|
},
|
|
|
+ // selectClick(event) {
|
|
|
+ // this.activeName = event.target.value;
|
|
|
+ // switch (this.activeName) {
|
|
|
+ // case '当月':
|
|
|
+ // //this.runChartHttp('month');
|
|
|
+ // break;
|
|
|
+ // case '当年':
|
|
|
+ // //this.runChartHttp('year');
|
|
|
+ // break;
|
|
|
+ // case '去年':
|
|
|
+ // //this.runChartHttp('last');
|
|
|
+ // break;
|
|
|
+ // case '全部':
|
|
|
+ // // this.runChartHttp('all');
|
|
|
+ // break;
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ goDetailPage(id){
|
|
|
+ this.$router.push({ path: '/company/detail', query: { id: id }})
|
|
|
+ },
|
|
|
topSearch: function () {
|
|
|
let that = this;
|
|
|
that.$api.totalApi.searchApi(that.searchVal,'common','company','list').then(res=>{
|
|
|
- console.log(res)
|
|
|
+ if (res.data.code === 200) {
|
|
|
+ let list = res.data.data.list;
|
|
|
+ list.forEach((e, i) => {
|
|
|
+ e.pic_url = e.pic_url ? this.shareBaseUrl + e.pic_url : require('../../assets/default.png')
|
|
|
+ });
|
|
|
+ this.companyList = list;
|
|
|
+ }
|
|
|
})
|
|
|
},
|
|
|
pageInit:function () {
|
|
|
@@ -103,7 +216,7 @@
|
|
|
|
|
|
</script>
|
|
|
<style>
|
|
|
- .company {
|
|
|
+ .company-box {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
@@ -132,10 +245,11 @@
|
|
|
border: 1px solid #ccc;
|
|
|
margin-right: 10px;
|
|
|
margin-left: 15px;
|
|
|
+ outline: none;
|
|
|
}
|
|
|
.input-box button {
|
|
|
height: 30px;
|
|
|
- width: 55px;
|
|
|
+ width: 50px;
|
|
|
color: #fff;
|
|
|
border: none;
|
|
|
background-color: cornflowerblue;
|
|
|
@@ -152,4 +266,67 @@
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
|
|
|
+ .company-top-box {
|
|
|
+ margin-top: 40px;
|
|
|
+ border-top: 1px solid #e7e7e7;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cross-line {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+ .cross-line span {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .cross-line select {
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .company {
|
|
|
+ /*box-shadow: rgba(0, 0, 0, 0.35) 0 3px 7px;*/
|
|
|
+ padding: 15px;
|
|
|
+ border-bottom: 15px solid #e7e7e7
|
|
|
+ /*margin: 3% 0;*/
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .logo {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 75px;
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+ .logo-img {
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 100%;
|
|
|
+ }
|
|
|
+ .line {
|
|
|
+ width: 1px;
|
|
|
+ height: 35px;
|
|
|
+ background: rgb(175, 186, 197);
|
|
|
+ }
|
|
|
+ .info {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 100;
|
|
|
+ display: flex;
|
|
|
+ text-align: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 2%;
|
|
|
+ margin-top: 2%;
|
|
|
+ }
|
|
|
+ .info div{
|
|
|
+ margin-top: 2%;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ .info_t {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|