Bladeren bron

完善企业页面

306132416@qq.com 5 jaren geleden
bovenliggende
commit
6cd1e236cc

+ 1 - 1
code/public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>vuefirst</title>
+    <title>统计</title>
   </head>
   <body>
     <noscript>

+ 1 - 0
code/src/api/base.js

@@ -3,6 +3,7 @@
  */
 const base = {
    url: 'https://kiq.xazhima.com/api/api.php',
+   urlHead:'https://kiq.xazhima.com/',
    secret: "AirQK_weichat_app_zhima",
   //online: 'http://m.boniu.xazhima.com/api'
 }

+ 10 - 0
code/src/api/big_screen.js

@@ -23,6 +23,16 @@ const totalApi = {
     };
     return axios.post(url,qs.stringify(data));
   },
+  byIdApi(id,methodType,sourceType,actionType,isDetail) {
+    let md5Sign = md5("method=" + methodType + "&timestamp=" + timeObj.nowTimeStamp + "&secret=" +base.secret);
+    let url = base.url +"?method="+ methodType + "&source=" + sourceType + "&action=" + actionType + "&timestamp=" + timeObj.nowTimeStamp +"&sign=" + md5Sign;
+    let data =  isDetail ? {s_company_id:id} : {id:id};
+    return axios.post(url,qs.stringify(data));
+  },
+  richHtmlProductApi(ids){
+    let url =base.urlHead + 'api/content.php?source=company_product&id='+ids;
+    return axios.get(url);
+  },
   run_chart (time) {
     let data = {
       method:'run_chart',

+ 2 - 2
code/src/components/PieChart.vue

@@ -72,7 +72,7 @@
                     series: [
                         {
                             type: 'pie',
-                            radius: [0, '50%'],
+                            radius: [0, '40%'],
                             center: ['50%', '42%'],
                             avoidLabelOverlap: false,
                             emphasis: {
@@ -103,7 +103,7 @@
                             },
                             labelLine: {
                                 normal: {
-                                    length: 20,
+                                    length: 10,
                                     length2:50,
                                     // smooth:true,
                                     // lineStyle: {

+ 1 - 1
code/src/components/annularChart.vue

@@ -103,7 +103,7 @@ export default {
                         },
                         labelLine: {
                             normal: {
-                                length: 50,
+                                length: 40,
                                 length2: 50,
                                 // smooth:true,
                                 // lineStyle: {

+ 16 - 4
code/src/router/index.js

@@ -8,16 +8,28 @@ const routes = [
   {
     path: '/',
     name: 'home',
-    component: Home
+    component: Home,
+    meta: { title: "首页" },
   },
   {
     path: '/company',
     name: 'company',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
+    meta: { title: "企业分类统计" },
     component: () => import(/* webpackChunkName: "about" */ '../views/company/company.vue')
   },
+  // 企业分类下级路由
+  {
+    path: '/company/detail',
+    name: 'companyDetail',
+    component: () => import(/* webpackChunkName: "about" */ '../views/company/detail.vue'),
+    meta: {title: "企业详情"},
+  },
+  {
+    path: '/company/productDetail',
+    name: 'productDetail',
+    component: () => import(/* webpackChunkName: "about" */ '../views/company/productDetail.vue'),
+    meta: {title: "产品详情"},
+  },
   {
     path: '/consult',
     name: 'consult',

+ 1 - 1
code/src/utils/http.js

@@ -86,7 +86,7 @@ instance.interceptors.response.use(
     const { response } = error;
     if (response) {
       // 请求已发出,但是不在2xx的范围
-      errorHandle(response.status, response.data.message);
+      // errorHandle(response.status, response.data.message);
       return Promise.reject(response);
     } else {
       // 处理断网的情况

+ 219 - 42
code/src/views/company/company.vue

@@ -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>

+ 321 - 0
code/src/views/company/detail.vue

@@ -0,0 +1,321 @@
+<template>
+    <div class="content" v-if="isShow">
+        <div class="title">
+            <div class="logo">
+                <img :src="shareBaseUrl + info.pic_url"  alt="" class="logo-img" />
+            </div>
+            <div class="name">
+                {{ info.name || "-" }}
+            </div>
+        </div>
+        <div class="enterprise-item-box">
+            <div
+                    v-for="(item, idx) in titleList"
+                    :key="idx"
+                    :class="{ active: active === idx }"
+                    class="enterprise-item-name"
+                    @click="change(idx)"
+            >
+                {{ item || "-" }}
+            </div>
+        </div>
+
+        <div class="baseInfo" v-if="active === 0">
+            <div class="card-title">{{ model.title }}</div>
+            <div class="item-list">
+                <div v-for="(item, idx) in model.item" :key="idx" class="term">
+                <div class="term-name">{{ item.name }}:</div>
+                <div class="term-value-group" v-if="item.name !== '网址'">
+                    <p v-for="(value, idx) in item.value" :key="idx" class="term-value-item" :class="{ blue: item.name === '电话' }" @click="callPhone">
+                        {{ value || "-" }}
+                    </p>
+                </div>
+                    <div class="term-value-group" v-else style="flex-direction: row; align-items: center;padding-left: 10px;">
+                        <div class="flex_i">
+                            <div>
+                                {{ item.value[0] || "-" }}
+                            </div>
+                            <div
+                                    v-if="item.value[0]"
+                                    class="copy"
+                                    @click="copy(item.value[0])"
+                                    style="color: #02a7f0; margin-left: 7px"
+                            >复制</div
+                            >
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div v-else-if="active === 1" class="proInfo">
+            <div class="products">
+                <div class="product"  v-for="(item, idx) in productList" :key="idx" @click="goProductDetail(item.id,item.pic_url)">
+                    <div class="img">
+                        <img :src="item.pic_url" />
+                    </div>
+                    <div class="name">{{ item.name || "-" }}</div>
+                </div>
+            </div>
+            <div v-if="productList.length === 0" class="products">
+                <img src="../../assets/default.png" alt="" />
+                <div style="margin: 0 auto">暂无产品信息</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+            components: {
+            },
+            data() {
+            return {
+                titleList: ["基本信息", "产品信息"],
+                active: 0,
+                info: {},
+                model: {},
+                productList: [],
+                isShow: false,
+                infoObj: {},
+                pageId:'',
+                shareBaseUrl:"https://kiq.xazhima.com/",
+                companyLogo:'',
+                companyName:''
+            };
+        },
+        computed: {},
+        watch: {},
+        methods: {
+            callPhone(value) {
+            },
+            change(idx) {
+                this.active = idx;
+            },
+            goProductDetail(id,imgUrl){
+                this.$router.push({ path: '/company/productDetail', query: { id: id, imgUrl: imgUrl, logo:this.companyLogo, name:this.companyName }})
+            },
+            getCompanyInfo(id) {
+                let that = this;
+                that.$api.totalApi.byIdApi(id,'common','company','info_by_id',0).then(res=>{
+                    if (res.data.code === 200) {
+                        this.infoObj = res.data.data;
+                        let {
+                            name,
+                            pic_url,
+                            representative,
+                            found_date,
+                            capital,
+                            code,
+                            industry_name,
+                            park_name,
+                            work_address,
+                            rigiser_address,
+                            web_url,
+                            phone,
+                            work_range,
+                        } = res.data.data;
+                        this.info = {
+                            name,
+                            pic_url,
+                            representative,
+                            found_date,
+                            capital,
+                            code,
+                            industry_name,
+                            park_name,
+                            work_address,
+                            rigiser_address,
+                            web_url,
+                            phone,
+                            work_range,
+                        };
+                        this.info.capital = this.info.capital + '万元'
+                        this.model = {
+                            title: "",
+                            item: [
+                                {
+                                    name: "法定代表人",
+                                    value: [this.info.representative],
+                                },
+                                {
+                                    name: "成立日期",
+                                    value: [this.info.found_date],
+                                },
+                                {
+                                    name: "注册资本",
+                                    value: [this.info.capital],
+                                },
+                                {
+                                    name: "统一社会信用代码",
+                                    value: [this.info.code],
+                                },
+                                {
+                                    name: "所属行业",
+                                    value: [this.info.industry_name],
+                                },
+                                {
+                                    name: "所属园区",
+                                    value: [this.info.park_name],
+                                },
+                                {
+                                    name: "经营范围",
+                                    value: [this.info.work_range],
+                                },
+                                {
+                                    name: "地址",
+                                    value: [this.info.rigiser_address],
+                                },
+                                {
+                                    name: "网址",
+                                    value: [this.info.web_url],
+                                },
+                                {
+                                    name: "电话",
+                                    value: [this.info.phone],
+                                },
+                            ],
+                        };
+                        this.companyLogo = this.info.pic_url ? this.shareBaseUrl + this.info.pic_url : require('../../assets/default.png');
+                        this.companyName = this.info.name;
+                        this.isShow = true;
+                    }
+                })
+            },
+            getProductInfo(id) {
+                let that = this;
+                that.$api.totalApi.byIdApi(id,'common','company_product','list',1).then(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.productList = list;
+                        console.log(this.productList);
+                    }
+                })
+            },
+        },
+//生命周期 - 创建完成(可以访问当前this实例)
+        created() {
+
+        },
+//生命周期 - 挂载完成(可以访问DOM元素)
+        mounted() {
+            this.getCompanyInfo(this.$route.query.id)
+            this.getProductInfo(this.$route.query.id)
+        },
+    }
+</script>
+
+<style scoped>
+    .content {
+        padding: 4%;
+        font-size: 16px;
+    }
+    .blue {
+        color: #02a7f0;
+    }
+    .title {
+        display: flex;
+        align-items: center;
+        border-radius: 5px;
+        margin-bottom: 25px;
+        box-shadow: rgba(0, 0, 0, 0.35) 0 3px 7px;
+        height: 75px;
+        padding: 0 10px;
+    }
+    .logo {
+        width: 75px;
+        height: 50px;
+    }
+    .logo-img {
+        max-width: 100%;
+        max-height: 100%;
+    }
+    .name{
+        /*margin-left: 15px;*/
+    }
+    .baseInfo {
+        margin-bottom: 25px;
+    }
+    .card-title {
+        padding: 10px 10px 0 10px;
+        font-weight: 600;
+    }
+    .item-list {
+        margin-left: 10px;
+        display: flex;
+        flex-direction: column;
+    }
+    .term {
+        display: flex;
+    }
+    .term-name {
+        font-size: 14px;
+        width: 35%;
+        display: flex;
+        margin: 10px;
+        color: #7f7f7f;
+    }
+    .term-value-group {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        font-size: 14px;
+    }
+    .term-value-item {
+        margin: 10px;
+        text-align: left;
+    }
+    .flex_i {
+        display: flex;
+        flex-flow: row;
+        justify-content: space-around;
+    }
+    .proInfo {
+        font-size:15px;
+    }
+    .products {
+        width: 93%;
+        display: flex;
+        padding: 4%;
+        flex-wrap: wrap;
+    }
+    .product {
+        margin: 2%;
+        padding: 2%;
+        border-radius: 15px;
+        box-shadow: rgba(0, 0, 0, 0.35) 0 3px 7px;
+        width: 40%;
+        height: 110px;
+        display: flex;
+        flex-flow: column;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .img {
+        width: 90px;
+        /*height: 100px;*/
+    }
+    .img img {
+        width: 100%;
+        height: 90%;
+    }
+    .enterprise-item-box {
+        display: flex;
+        justify-content: space-evenly;
+        margin: 0 5px;
+        margin-top: 5px;
+    }
+    .enterprise-item-name {
+        padding-bottom: 5px;
+        font-size: 14px;
+    }
+    .active {
+        font-weight: 600;
+        border-bottom: 3px solid #02a7f0;
+    }
+    .margin-bottom-80 {
+        margin-bottom: 40px;
+    }
+</style>

+ 89 - 0
code/src/views/company/productDetail.vue

@@ -0,0 +1,89 @@
+<template>
+    <div class="content">
+        <div class="title">
+            <div class="logo">
+                <img :src="logo" alt=""/>
+            </div>
+            <div class="name">
+                {{ name }}
+            </div>
+        </div>
+        <div v-if="titleUrl">
+            <img :src="titleUrl" alt="logo" class="detail-img"/>
+        </div>
+        <div class="fwb" style="text-align: left;" v-html="company"></div>
+    </div>
+</template>
+
+<script>
+    export default {
+        components: {
+            // uParse
+        },
+        mounted() {
+            console.log(this.$route.query);
+            this.getRich(this.$route.query.id);
+            this.titleUrl = this.$route.query.imgUrl;
+            this.logo = this.$route.query.logo;
+            this.name = this.$route.query.name;
+        },
+        data() {
+            return {
+                company: "",
+                titleUrl:'',
+                logo:'',
+                name: '',
+                shareBaseUrl:"https://kiq.xazhima.com/",
+            };
+        },
+        methods: {
+            replaceImg(html) {
+                let that = this;
+                return html.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi,function (match, capture) {
+                        if(capture.includes('http')){
+                            return (
+                                "<img src=" + capture +' style="max-width:100%;height:auto;display:block;margin:10px 0;"/>'
+                            );
+                        }else {
+                            return (
+                                "<img src=" + that.shareBaseUrl + capture +' style="max-width:100%;height:auto;display:block;margin:10px 0;"/>'
+                            );
+                        }
+                    }
+                );
+            },
+            getRich(ids) {
+                this.$api.totalApi.richHtmlProductApi(ids).then(res=>{
+                    if (res.status === 200) {
+                        this.company = this.replaceImg(res.data);
+                    }
+                })
+            },
+        },
+    };
+</script>
+
+<style scoped>
+    .content {
+        padding: 4%;
+        font-size: 16px;
+    }
+    .title {
+        display: flex;
+        align-items: center;
+        border-radius: 5px;
+        margin-bottom: 10px;
+        box-shadow: rgba(0, 0, 0, 0.35) 0 3px 7px;
+        padding:5px;}
+    .logo img {
+        width: 50px;
+        height: 50px;
+        margin: 0 15px;
+    }
+    .detail-img {
+        width: 100%;
+        height: 200px;
+        object-fit: contain;
+        margin-bottom: 10px;
+    }
+</style>

+ 1 - 1
code/vue.config.js

@@ -28,7 +28,7 @@ module.exports = {
     proxy: {
       '/api': {
         target: 'http://localhost:8080/',
-        changeOrigin: true
+        changeOrigin: true,
       }
     }
   },

File diff suppressed because it is too large
+ 1 - 1
dist/index.html


File diff suppressed because it is too large
+ 1 - 0
dist/static/css/about.66f50997.css


File diff suppressed because it is too large
+ 0 - 1
dist/static/css/about.7c10a04c.css


File diff suppressed because it is too large
+ 1 - 0
dist/static/js/about.9c47ab2a.js


File diff suppressed because it is too large
+ 0 - 1
dist/static/js/about.b450c3b0.js


File diff suppressed because it is too large
+ 1 - 1
dist/static/js/app.ada0fc94.js