园区企业

digital-park-web/digital-park/src/api/company.js

+/**
+ * api接口统一管理
+ */
+import {get } from "../utils/http";
+
+// 获取园区企业列表
+export const getCompanyList = p => get("/areaCompany/getCompanyList", p);
+
+// 获取企业详情
+export const getCompanyById = p => get("/areaCompany/getCompanyById", p);

digital-park-web/digital-park/src/views/park-enterprises/Detail.vue

                 <section class="top_box">
                     <div class="company_img_box">
                         <img class="company_img" src="" alt="" />
-                        <img class="tip_img" src="" alt="" />
+                        <div class="tip_img"></div>
                     </div>
                     <div class="right_box">
                         <div class="top_row">
-                            <span>上海禾获仁网络科技有限公司</span>
+                            <span>{{ companyInfo.companyName }}</span>
                             <div>
                                 <span class="pointer">
-                                    <img src="" alt="" />
+                                    <img src="@assets/image/company/icon_save.png" alt="保存" />
                                     保存
                                 </span>
                                 <span class="pointer">
-                                    <img src="" alt="" />
+                                    <img src="@assets/image/company/icon_cancel.png" alt="取消" />
                                     取消
                                 </span>
                                 <span class="pointer">
-                                    <img src="" alt="" />
+                                    <img src="@assets/image/company/icon_edit.png" alt="编辑" />
                                     编辑
                                 </span>
                                 <span class="pointer">
-                                    <img src="" alt="" />
+                                    <img src="@assets/image/company/icon_claim.png" alt="认领" />
                                     认领
                                 </span>
                             </div>
                         </div>
                         <div class="middle_row">
                             <div class="company_type">
+                                <span>{{ companyInfo.enterpriseLabel }}</span>
                                 <span>科技型中小企业</span>
                                 <span>科技型中小企业</span>
                                 <span>科技型中小企业</span>
                             </div>
                             <div class="time">
                                 <img src="" alt="" />
-                                <span>更新时间：2022-03-04</span>
+                                <span>
+                                    更新时间：{{
+                                        companyInfo.modifiedOn | formatDate("YYYY-MM-DD")
+                                    }}
+                                </span>
                             </div>
                         </div>
                         <div class="company_info">
                             <div>
                                 法人代表：
-                                <span>李瑾</span>
+                                <span>{{ companyInfo.legalPerson }}</span>
                             </div>
                             <div>
                                 统一社会信用代码：
-                                <span>91310115MA1H71QG17</span>
+                                <span>{{ companyInfo.creditCode }}</span>
                             </div>
                             <div>
                                 电话：
-                                <span>021-64643026</span>
+                                <span>{{ companyInfo.companyMobilePhone }}</span>
                             </div>
                             <div>
                                 法人代表：
                             </div>
                             <div>
                                 成立日期：
-                                <span>2015-10-22</span>
+                                <span>
+                                    {{ companyInfo.establishOn | formatDate("YYYY-MM-DD") }}
+                                </span>
                             </div>
                             <div>
                                 邮箱：
-                                <span>3530451045@qq.com</span>
+                                <span>{{ companyInfo.email }}</span>
                             </div>
                         </div>
                     </div>
             </div>
         </section>
         <section class="content_box">
-            <basic-info></basic-info>
-            <company-dev></company-dev>
-            <intellectual-property></intellectual-property>
-            <other-info></other-info>
+            <basic-info :companyInfo="companyInfo"></basic-info>
+            <company-dev :companyInfo="companyInfo"></company-dev>
+            <intellectual-property :companyInfo="companyInfo"></intellectual-property>
+            <other-info :companyInfo="companyInfo"></other-info>
         </section>
         <Footer></Footer>
         <claim-dialog></claim-dialog>
 </template>
 
 <script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
 import Nav from "@components/Header.vue";
 import Footer from "@components/Footer.vue";
 import BasicInfo from "./components/BasicInfo.vue";
 import IntellectualProperty from "./components/IntellectualProperty.vue";
 import OtherInfo from "./components/OtherInfo.vue";
 import ClaimDialog from "./components/ClaimDialog.vue";
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-//例如：import 《组件名称》 from '《组件路径》';
+import { getCompanyById } from "@api/company";
 
 export default {
     //import引入的组件需要注入到对象中才能使用
     data() {
         //这里存放数据
         return {
+            companyId: "",
             tabs: [
                 {
                     name: "基本信息",
                 },
             ],
             activeTab: 1,
+            companyInfo: null,
         };
     },
     //监听属性 类似于data概念
         changeTab(item) {
             this.activeTab = item.value;
         },
+        getData() {
+            let params = {
+                companyId: this.companyId,
+            };
+            getCompanyById(params)
+                .then(res => {
+                    console.log(res.data);
+                    if (res.data.status == 0) {
+                        this.companyInfo = res.data.data;
+                    } else {
+                        this.$message.error(`获取数据失败,请刷新重试！`);
+                    }
+                    this.pageLoading = false;
+                })
+                .catch(err => {
+                    this.$message.error(`获取数据失败,失败原因${err},请刷新重试！`);
+                });
+        },
     },
     //生命周期 - 创建完成（可以访问当前this实例）
-    created() {},
+    created() {
+        this.companyId = this.$route.query.companyId;
+        this.getData();
+    },
     //生命周期 - 挂载完成（可以访问DOM元素）
     mounted() {},
 };
 <style lang="scss" scoped>
 //@import url(); 引入公共css类
 .nav_box {
-    background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
+    background: url("~@assets/image/company/bg_company.png") no-repeat;
     position: relative;
     .second_nv {
         @include size(100%, 250px);

digital-park-web/digital-park/src/views/park-enterprises/List.vue

             <div class="second_nv">
                 <div>
                     <div class="position">
-                        <img src="" alt="" />
+                        <img src="@assets/image/company/icon_address.png" alt="地址" />
                         <span>
                             当前位置：
                             <span class="pointer">园区企业</span>
                         </li>
                     </ul>
                     <div>
-                        <img src="" alt="展开" />
+                        <img
+                            class="pointer"
+                            src="@assets/image/company/icon_toggle.png"
+                            alt="展开"
+                        />
                     </div>
                 </div>
             </div>
         </section>
 
         <section class="content_box">
-            <div>
-                <company-item v-for="item in 6"></company-item>
+            <div v-loading="pageLoading">
+                <company-item
+                    v-for="item in dataList"
+                    :key="item.companyId"
+                    :companyInfo="item"
+                ></company-item>
             </div>
             <div class="pagination_box">
                 <Pagination></Pagination>
 </template>
 
 <script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
 import Nav from "@components/Header.vue";
 import Footer from "@components/Footer.vue";
 import CompanyItem from "./components/CompanyItem.vue";
 import Pagination from "@components/Pagination.vue";
 import SearchInput from "@views/park-information/components/SearchInput.vue";
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-//例如：import 《组件名称》 from '《组件路径》';
-
+import { getCompanyList } from "@api/company";
 export default {
     //import引入的组件需要注入到对象中才能使用
     components: { Nav, Footer, CompanyItem, Pagination, SearchInput },
                     activeScreen: 1,
                 },
             ],
+            pageLoading: false,
+            dataList: [],
         };
     },
     //监听属性 类似于data概念
     //监控data中的数据变化
     watch: {},
     //方法集合
-    methods: {},
+    methods: {
+        getData() {
+            this.pageLoading = true;
+            getCompanyList()
+                .then(res => {
+                    console.log(res.data);
+                    if (res.data.status == 0) {
+                        this.dataList = res.data.data;
+                        // this.total = res.data.data.total;
+                    } else {
+                        this.$message.error(`获取数据失败,请刷新重试！`);
+                    }
+                    this.pageLoading = false;
+                })
+                .catch(err => {
+                    this.$message.error(`获取数据失败,失败原因${err},请刷新重试！`);
+                });
+        },
+    },
     //生命周期 - 创建完成（可以访问当前this实例）
-    created() {},
+    created() {
+        this.getData();
+    },
     //生命周期 - 挂载完成（可以访问DOM元素）
     mounted() {},
 };
 <style lang="scss" scoped>
 //@import url(); 引入公共css类
 .nav_box {
-    background-image: linear-gradient(135deg, #42a6fe 0%, #0070d2 100%);
+    background: url("~@assets/image/company/bg_company.png") no-repeat;
     .second_nv {
         @include size(100%, 250px);
         > div {
         .position {
             @include flex(row, flex-start, center, null);
             img {
-                @include size(16px, 16px);
-                background: #ffffff;
                 margin-right: 6px;
             }
             padding-top: 10px;

digital-park-web/digital-park/src/views/park-enterprises/components/BasicInfo.vue

         <table class="table_box" cellspacing="0">
             <tr class="table_row">
                 <td class="table_title">统一社会信用代码：</td>
-                <td>91310115MA1H71QG17</td>
-                <td class="table_title">统一社会信用代码：</td>
-                <td colspan="3">上海禾获仁网络科技有限公司</td>
+                <td>{{ companyInfo.creditCode }}</td>
+                <td class="table_title">公司名称：</td>
+                <td colspan="3">{{ companyInfo.companyName }}</td>
             </tr>
             <tr class="table_row">
                 <td class="table_title">法人代表：</td>
-                <td>李瑾</td>
+                <td>{{ companyInfo.legalPerson }}</td>
                 <td class="table_title">登记状态：</td>
-                <td>存续（在营、开业、在册）</td>
+                <td>{{ JSON.parse(companyInfo.claimState).text }}</td>
                 <td class="table_title width_100">成立日期：</td>
-                <td>2015-10-22</td>
+                <td>{{ companyInfo.establishOn | formatDate("YYYY.MM.DD") }}</td>
             </tr>
             <tr class="table_row">
                 <td class="table_title">所属行业：</td>
-                <td colspan="3"></td>
+                <td colspan="3">{{ companyInfo.ownerIndustry }}</td>
                 <td class="table_title width_100">企业类型：</td>
-                <td>有限责任公司（自然人投资或控股）</td>
+                <td>{{ companyInfo.enterpriseType }}</td>
             </tr>
             <tr class="table_row">
                 <td class="table_title">营业期限：</td>
-                <td>2015.10.22--2035.10.21</td>
+                <td>
+                    {{ companyInfo.businessStartDate | formatDate("YYYY.MM.DD") }}--{{
+                        companyInfo.businessEndDate | formatDate("YYYY.MM.DD")
+                    }}
+                </td>
                 <td class="table_title">纳税人资质：</td>
-                <td>增值税一般纳税人</td>
+                <td>{{ companyInfo.taxpayerCertification }}</td>
                 <td class="table_title width_100">注册资本：</td>
-                <td>3109.09万元人民币</td>
+                <td>{{ companyInfo.registeredCapital }}</td>
             </tr>
 
             <tr class="table_row">
                 <td class="table_title">注册地址：</td>
-                <td colspan="5">中国(上海)自由贸易试验区临港新片区新城路2号24幢C3689室</td>
+                <td colspan="5">{{ companyInfo.registeredAddress }}</td>
             </tr>
             <tr class="table_row">
                 <td class="table_title">经营范围：</td>
                 <td colspan="5">
-                    一般项目：技术服务、技术开发、技术咨询、技术交流、技术转让、技术推广；企业形象策划；市场营销策划；广告设计、代理；广告发布（非广播电台、电视台、报刊出版单位）；广告制作；互联网销售（除销售需要许可的商品）；软件开发；组织文化艺术交流活动；市场主体登记注册代理；信息咨询服务（不含许可类信息咨询服务）；企业管理咨询；财务咨询。（除依法须经批准的项目外，凭营业执照依法自主开展经营活动）许可项目：代理记账；第一类增值电信业务。（依法须经批准的项目，经相关部门批准后方可开展经营活动，具体经营项目以相关部门批准文件或许可证件为准）
+                    {{ companyInfo.businessScope }}
                 </td>
             </tr>
         </table>
 //例如：import 《组件名称》 from '《组件路径》';
 
 export default {
+    props: {
+        companyInfo: {
+            type: Object,
+            default: () => {},
+        },
+    },
     //import引入的组件需要注入到对象中才能使用
     components: {},
     data() {
     created() {},
     //生命周期 - 挂载完成（可以访问DOM元素）
     mounted() {},
-    beforeCreate() {}, //生命周期 - 创建之前
-    beforeMount() {}, //生命周期 - 挂载之前
-    beforeUpdate() {}, //生命周期 - 更新之前
-    updated() {}, //生命周期 - 更新之后
-    beforeDestroy() {}, //生命周期 - 销毁之前
-    destroyed() {}, //生命周期 - 销毁完成
-    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang="scss" scoped>

digital-park-web/digital-park/src/views/park-enterprises/components/ClaimDialog.vue

     data() {
         //这里存放数据
         return {
-            dialogTableVisible: true,
+            dialogTableVisible: false,
             dialogTableVisible1: false,
             dialogTableVisible3: false,
             input: "",

digital-park-web/digital-park/src/views/park-enterprises/components/CompanyDev.vue

                     网站
                 </div>
                 <table-item
-                    :table-title="tableTitle"
+                    :table-title="websiteTitle"
                     :table-data="tableData"
                     :rowHeight="50"
                 ></table-item>
-            </div> 
+            </div>
             <div>
                 <div class="title">
                     股东(发起人)出资信息
                 </div>
                 <table-item
-                    :table-title="tableTitle"
-                    :table-data="tableData"
+                    :table-title="foreignInvestmentInfoTitle"
+                    :table-data="companyInfo.foreignInvestmentInfo"
                     :rowHeight="50"
                 ></table-item>
             </div>
                     融资信息
                 </div>
                 <table-item
-                    :table-title="tableTitle"
-                    :table-data="tableData"
+                    :table-title="financeInfoTitle"
+                    :table-data="companyInfo.financeInfo"
                     :rowHeight="50"
                 ></table-item>
             </div>
             <div>
                 <div class="title">
-                    股东(发起人)出资信息
+                    荣誉资质
                 </div>
                 <table-item
-                    :table-title="tableTitle"
-                    :table-data="tableData"
+                    :table-title="honorQualificationTitle"
+                    :table-data="companyInfo.honorQualification"
                     :rowHeight="50"
                 ></table-item>
             </div>
 //例如：import 《组件名称》 from '《组件路径》';
 
 export default {
+    props: {
+        companyInfo: {
+            type: Object,
+            default: () => {},
+        },
+    },
     //import引入的组件需要注入到对象中才能使用
     components: { TableItem },
     data() {
         //这里存放数据
         return {
-            tableTitle: [
+            websiteTitle: [
+                {
+                    label: "类型",
+                    property: "date",
+                },
+                {
+                    label: "名称",
+                    property: "date",
+                },
+                {
+                    label: "网站",
+                    property: "date",
+                },
+            ],
+            foreignInvestmentInfoTitle: [
+                {
+                    label: "发起人",
+                    property: "date",
+                },
+                {
+                    label: "认缴出资额(万元)",
+                    property: "date",
+                },
+                {
+                    label: "认缴出资日期",
+                    property: "date",
+                },
+                {
+                    label: "认缴出资方式",
+                    property: "date",
+                },
+                {
+                    label: "实缴出资额(万元)",
+                    property: "date",
+                },
+                {
+                    label: "实缴出资日期",
+                    property: "date",
+                },
+                {
+                    label: "实缴出资方式",
+                    property: "date",
+                },
+            ],
+            financeInfoTitle: [
                 {
                     label: "日期",
                     property: "date",
                 },
                 {
-                    label: "姓名",
+                    label: "产品名称",
                     property: "name",
                 },
                 {
-                    label: "地址",
+                    label: "融资轮次",
+                    property: "address",
+                },
+                {
+                    label: "估值金额",
+                    property: "address",
+                },
+                {
+                    label: "融资金额",
                     property: "address",
                 },
                 {
-                    slot: "handle",
+                    label: "投资机构",
+                    property: "address",
+                },
+            ],
+            honorQualificationTitle: [
+                {
+                    label: "名称",
+                    property: "date",
+                },
+                {
+                    label: "资质类型",
+                    property: "name",
+                },
+                {
+                    label: "级别",
+                    property: "address",
+                },
+                {
+                    label: "来源",
+                    property: "address",
+                },
+                {
+                    label: "发布单位",
+                    property: "address",
+                },
+                {
+                    label: "发布日期",
+                    property: "address",
+                },
+                {
+                    label: "开始日期",
+                    property: "address",
+                },
+                {
+                    label: "截止日期",
+                    property: "address",
                 },
             ],
             tableData: [
     created() {},
     //生命周期 - 挂载完成（可以访问DOM元素）
     mounted() {},
-    beforeCreate() {}, //生命周期 - 创建之前
-    beforeMount() {}, //生命周期 - 挂载之前
-    beforeUpdate() {}, //生命周期 - 更新之前
-    updated() {}, //生命周期 - 更新之后
-    beforeDestroy() {}, //生命周期 - 销毁之前
-    destroyed() {}, //生命周期 - 销毁完成
-    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang="scss" scoped>

digital-park-web/digital-park/src/views/park-enterprises/components/CompanyItem.vue

 <!-- 园区企业单个item      -->
 <template>
-    <div class="item_box">
+    <div class="item_box" @click="goDetail(companyInfo.companyId)">
         <img class="company_img" src="" alt="" />
         <div class="info_box">
             <div class="title_box">
-                <span class="company_title">上海禾获仁网络科技有限公司</span>
-                <img src="" alt="" />
+                <span class="company_title">{{ companyInfo.companyName }}</span>
+                <span
+                    :class="[
+                        'claim_state',
+                        JSON.parse(companyInfo.claimState).text === '已申领'
+                            ? 'claimed'
+                            : 'not_claim',
+                    ]"
+                >
+                    {{ JSON.parse(companyInfo.claimState).text }}
+                </span>
             </div>
             <div class="company_info">
-                <span>法人：张三</span>
-                <span>状态：存续</span>
-                <span>注册资本：50万</span>
-                <span>成立日期：2016.09.12</span>
-                <span>信用代码：91310115MA1H71QG17</span>
+                <span>法人：{{ companyInfo.legalPerson }}</span>
+                <span>状态：{{ companyInfo.enterpriseState }}</span>
+                <span>注册资本：{{ companyInfo.registeredCapital }}</span>
+                <span>成立日期：{{ companyInfo.establishOn | formatDate("YYYY-MM-DD") }}</span>
+                <span>信用代码：{{ companyInfo.creditCode }}</span>
             </div>
             <div class="company_info">
-                <span>行业：科技推广和应用服务业</span>
-                <span>
-                    地址：中国(上海)自由贸易试验区临港新片区新城路2号24幢C3689室中国(上海)自由贸易试验区临港新片区新城路2号24幢C3689室
-                </span>
+                <span>行业：{{ companyInfo.ownerIndustry }}</span>
+                <span>地址：{{ companyInfo.businessAddress }}</span>
             </div>
             <div class="advantage_box">
+                <span>{{ companyInfo.enterpriseLabel }}</span>
                 <span>高新技术企业</span>
                 <span>科技型中小企业</span>
                 <span>小微企业</span>
             </div>
             <div class="business">
                 <span>主营业务：</span>
-                技术服务、技术开发、技术咨询、技术交流、技术转让、技术推广；企业形象策划；市场营销策划；技术服务、技术开发、技术咨询、技术交流、技术转让、技术推广；企业形象策划；市场营销策划；
+                {{ companyInfo.businessScope }}
             </div>
         </div>
     </div>
 
 export default {
     //import引入的组件需要注入到对象中才能使用
+    props: {
+        companyInfo: {
+            type: Object,
+            default: () => {},
+        },
+    },
     components: {},
     data() {
         //这里存放数据
     //监控data中的数据变化
     watch: {},
     //方法集合
-    methods: {},
+    methods: {
+        goDetail(companyId) {
+            this.$router.push({
+                path: "/company-detail",
+                query: {
+                    companyId,
+                },
+            });
+        },
+    },
     //生命周期 - 创建完成（可以访问当前this实例）
     created() {},
     //生命周期 - 挂载完成（可以访问DOM元素）
                 font-weight: 600;
                 margin-right: 10px;
             }
-            img {
+            .claim_state {
                 @include size(68px, 22px);
-                background-image: linear-gradient(135deg, #4bbe8e 0%, #22a76f 100%);
+                @include flex(row, flex-start, center, null);
+                @include font(14px, #fff);
+                padding-left: 6px;
+                @include border-box;
+            }
+            .claimed {
+                background: url("~@assets/image/company/bg_claimed.png") no-repeat;
+            }
+            .not_claim {
+                background: url("~@assets/image/company/bg_not_claim.png") no-repeat;
             }
         }
         .company_info {

digital-park-web/digital-park/src/views/park-enterprises/components/IntellectualProperty.vue

     created() {},
     //生命周期 - 挂载完成（可以访问DOM元素）
     mounted() {},
-    beforeCreate() {}, //生命周期 - 创建之前
-    beforeMount() {}, //生命周期 - 挂载之前
-    beforeUpdate() {}, //生命周期 - 更新之前
-    updated() {}, //生命周期 - 更新之后
-    beforeDestroy() {}, //生命周期 - 销毁之前
-    destroyed() {}, //生命周期 - 销毁完成
-    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang="scss" scoped>

digital-park-web/digital-park/src/views/park-enterprises/components/OtherInfo.vue

             <tr>
                 <td class="table_title">企业优势：</td>
                 <td class="content">
-                    技术服务、技术开发、技术咨询、技术交流、技术转让、技术推广
+                    {{ companyInfo.enterpriseAdvantage }}
                 </td>
             </tr>
             <tr>
                 <td class="table_title">企业文化：</td>
                 <td class="content">
-                    技术服务、技术开发、技术咨询、技术交流、技术转让、技术推广
+                   {{companyInfo.enterpriseCulture}}
                 </td>
             </tr>
             <tr>
-                <td class="table_title">企业文化：</td>
+                <td class="table_title">企业风采：</td>
                 <td class="content">
                     <img class="company_img" src="" alt="" />
                     <img class="company_img" src="" alt="" />
             <tr>
                 <td class="table_title">其他信息：</td>
                 <td class="content">
-                    一般项目：技术服务、技术开发、技术咨询、技术交流、技术转让、技术推广；企业形象策划；市场营销策划；广告设计、代理；广告发布（非广播电台、电视台、报刊出版单位）；广告制作；互联网销售（除销售需要许可的商品）；软件开发；组织文化艺术交流活动；市场主体登记注册代理；信息咨询服务（不含许可类信息咨询服务）；企业管理咨询；财务咨询。（除依法须经批准的项目外，凭营业执照依法自主开展经营活动）许可项目：代理记账；第一类增值电信业务。（依法须经批准的项目，经相关部门批准后方可开展经营活动，具体经营项目以相关部门批准文件或许可证件为准）
+                    {{companyInfo.otherInfo}}
                 </td>
             </tr>
         </table>
 //例如：import 《组件名称》 from '《组件路径》';
 
 export default {
+    props: {
+        companyInfo: {
+            type: Object,
+            default: () => {},
+        },
+    },
     //import引入的组件需要注入到对象中才能使用
     components: {},
     data() {

digital-park-web/digital-park/src/views/park-information/components/SearchInput.vue

 <!--  -->
 <template>
     <div class="input_box">
-        <el-input placeholder="请输入搜索内容" v-model="input2">
-            <div slot="prefix" class="icon_box"><img src="" alt="" /></div>
+        <el-input placeholder="请输入搜索内容" clearable v-model="input2">
+            <div slot="prefix" class="icon_box">
+                <img src="@assets/image/company/icon_search.png" alt="搜索" />
+            </div>
             <div slot="append" class="pointer">搜索</div>
         </el-input>
     </div>
     .icon_box {
         height: 100%;
         @include flex(row, center, center, null);
+        padding-left: 15px;
+        @include border-box;
         img {
             @include size(24px, 24px);
         }