跟新可视化

src/api/visualization/index.js

@@ -19,3 +19,138 @@ export function getLngLatValueData(query) {
     })
   }
 
+// 查询评价分析
+export function getCreditScoreList(query) {
+  return request({
+    url: '/crmHighTechZoneEnterprises/getCreditScoreList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询生产总值
+export function getTrossDomesticProduct(query) {
+  return request({
+    url: '/crmOutputValue/getList',
+    method: 'get',
+    params: query
+  })
+}
+// 查询税收TOP10
+export function getTopTenTaxation(query) {
+  return request({
+    url: '/crmEnterpriseTaxPaymentInfo/getList',
+    method: 'get',
+    params: query
+  })
+}
+// 查询潇湘财银贷
+export function getXiaoxiangCaiyinLoan(query) {
+  return request({
+    url: '/crmLoanLedger/getList',
+    method: 'get',
+    params: query
+  })
+}
+// 查询科技贷
+export function getTechnologyLoan(query) {
+  return request({
+    url: '/crmTechLoanAccount/getList',
+    method: 'get',
+    params: query
+  })
+}
+// 查询惠园贷
+export function getHuiyuanLoan(query) {
+  return request({
+    url: '/crmHuiparkLoanAccount/getList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询入驻企业、企业数量
+export function getNumberOfEnterprises(query) {
+  return request({
+    url: '/crmHighTechZoneEnterprises/getList',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 查询上市企业
+export function getListedCompanies(query) {
+  return request({
+    url: '/crmListedCompany/getList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询高新技术企业
+export function getHighTechEnterprises(query) {
+  return request({
+    url: '/crmCertifiedTechnologyEnterprise/getList',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 查询科技中小型企业
+export function getTechnologySmallAndmediumSizedEnterprises(query) {
+  return request({
+    url: '/crmTechnologyEnterprises/getList',
+    method: 'get',
+    params: query
+  })
+}
+// 查询专利信息
+export function getPatentInformation(query) {
+  return request({
+    url: '/crmPatentInformation/getList',
+    method: 'get',
+    params: query
+  })
+}
+// 查询行政处罚
+export function getAdministrativeSanction(query) {
+  return request({
+    url: '/crmAdministrativePenalty/getList',
+    method: 'get',
+    params: query
+  })
+}
+// 查询行政强制执行
+export function getAdministrativeEnforcement(query) {
+  return request({
+    url: '/crmAdministrativeCompulsionInformation/getList',
+    method: 'get',
+    params: query
+  })
+}
+// 查询经营异常
+export function getBusinessAdnormalities(query) {
+  return request({
+    url: '/crmBusinessAbnormality/getList',
+    method: 'get',
+    params: query
+  })
+}
+// 查询失信被执行人
+export function getDishonestDebtor(query) {
+  return request({
+    url: '/crmDishonestExecutor/getList',
+    method: 'get',
+    params: query
+  })
+}
+// 查询社保
+export function getSocialSecurity(query) {
+  return request({
+    url: '/crmEnterpriseSocialSecurityInfo/getList',
+    method: 'get',
+    params: query
+  })
+}

src/views/visualization/index.vue

@@ -44,16 +44,44 @@
             </div>
 
             <div class="boxBottom">
-                <div class="boxBttOne">
-                    <div class="leftOBTitle">园区特色融资贷款</div>
-                    <div class="leftOBContent">
-                        <baseEcharts></baseEcharts>
+                <div class="parkLoan">
+                    <div class="PCFLTitle">园区特色融资贷款</div>
+                    <div class="PCFLContent">
+                        <div class="PCFLNumber">
+                            <div class="RPCBData">
+                                <div class="RPCBDNumber">1000</div>
+                                <div class="RPCBDName">潇湘财银贷</div>
+                            </div>
+                            <div class="RPCBData">
+                                <div class="RPCBDNumber">2000</div>
+                                <div class="RPCBDName">惠园贷</div>
+                            </div>
+                            <div class="RPCBData">
+                                <div class="RPCBDNumber">1500</div>
+                                <div class="RPCBDName">科技贷</div>
+                            </div>
+                        </div>
+                        <div class="PCFLImg">
+                            <div><img src='../../assets/visualizationimg/onepick.png' alt=""></div>
+                            <div><img src='../../assets/visualizationimg/twopack.png' alt=""></div>
+                            <div><img src='../../assets/visualizationimg/threepick.png' alt=""></div>
+                        </div>
                     </div>
                 </div>
                 <div class="boxBttTwo">
-                    <div class="leftOBTitle">企业管理</div>
-                    <div class="leftOBContent">
-                        <baseEcharts></baseEcharts>
+                    <div class="businessManagTitle">企业管理</div>
+                    <div class="businessManagContent">
+                        <div class="RPCBox" v-for="(item, index) in business" :key="index">
+                            <div class="RPCBImg">
+                                <img :src=item.img alt="">
+                            </div>
+                            <div class="RPCBData">
+                                <div class="RPCBDName">{{ item.title }}</div>
+                                <div class="RPCBDNumber">{{ item.value }}</div>
+                                <div class="RPCBDRatio">{{ item.ratio }}</div>
+
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -76,8 +104,51 @@
                 <div class="rightIndustryComplianceBox">
                     <div class="RICBTitle">行业合规</div>
                     <div class="RICBTContent">
-                        <div></div>
-                        <div></div>
+                        <div class="RICBTCBoxOne">
+                            <div class="" style="
+                            margin-left: 20px;">
+                                <div class="proportion">70%</div>
+                                <div class="administrativeS">行政处罚</div>
+                            </div>
+                            <div class="" style="
+                            margin-left: 20px;">
+                                <div class="proportion">119</div>
+                                <div class="administrativeS">企业数量</div>
+                            </div>
+                            <div class="" style="
+                            margin-left: 20px;">
+                                <div class="proportion">70</div>
+                                <div class="administrativeS">被处罚企业数</div>
+                            </div>
+                            <div class="" style="
+                            margin-left: 20px;">
+                                <div class="proportion">20</div>
+                                <div class="administrativeS">行政处罚条数</div>
+                            </div>
+                        </div>
+                        <div class="RICBTCBoxOne">
+                            <div class="" style="
+                            margin-left: 20px;">
+                                <div class="proportion">70%</div>
+                                <div class="administrativeS">行政处罚</div>
+                            </div>
+                            <div class="" style="
+                            margin-left: 20px;">
+                                <div class="proportion">119</div>
+                                <div class="administrativeS">企业数量</div>
+                            </div>
+                            <div class="" style="
+                            margin-left: 20px;">
+                                <div class="proportion">70</div>
+                                <div class="administrativeS">被处罚企业数</div>
+                            </div>
+                            <div class="" style="
+                            margin-left: 20px;">
+                                <div class="proportion">20</div>
+                                <div class="administrativeS">行政处罚条数</div>
+                            </div>
+                        </div>
+                        <!-- <div class="RICBTCBoxTwo"></div> -->
                     </div>
                 </div>
                 <div class="leftOneBox">
@@ -95,7 +166,24 @@
 import { ref, onMounted } from 'vue';
 import baseEcharts from '@/components/baseEcharts/index.vue'
 import PieEcharts from '@/components/baseEcharts/pieChart.vue'
-import { getClassificationValueData, getLngLatValueData } from '@/api/visualization/index'
+import { getClassificationValueData
+    , getLngLatValueData
+    , getCreditScoreList
+    , getTrossDomesticProduct
+    , getTopTenTaxation
+    , getXiaoxiangCaiyinLoan
+    , getTechnologyLoan
+    , getHuiyuanLoan
+    , getNumberOfEnterprises
+    , getListedCompanies
+    , getHighTechEnterprises
+    , getTechnologySmallAndmediumSizedEnterprises
+    , getPatentInformation
+    , getAdministrativeSanction
+    , getAdministrativeEnforcement
+    , getBusinessAdnormalities
+    , getDishonestDebtor
+    , getSocialSecurity } from '@/api/visualization/index'
 
 const mapContainer = ref(null);
 let map = null;
@@ -131,28 +219,29 @@ import parkfour from '@/assets/visualizationimg/parkfour.png';
 import parkfive from '@/assets/visualizationimg/parkfive.png';
 import parksix from '@/assets/visualizationimg/parksix.png';
 
+
 const parkData = [{
     title: '入驻企业',
     value: 123,
     img: parkOne
 }, {
-    title: '占地面积',
+    title: '上市企业',
     value: 400,
     img: parktwo
 }, {
-    title: '产业资源',
+    title: '高新技术企业',
     value: 12,
     img: parkthree
 }, {
-    title: '规划面积',
+    title: '科技型中小企业',
     value: 900,
     img: parkfour
 }, {
-    title: '总产值',
+    title: '占地面积',
     value: 12,
     img: parkfive
 }, {
-    title: '总利润',
+    title: '园区企业专利数',
     value: 11,
     img: parksix
 }]
@@ -199,6 +288,21 @@ const RanKingData = [{
     mig: ten
 }]
 
+
+const business = [{
+    title: '园区纳税企业',
+    value: 81,
+    ratio: '70%',
+    state: 1,
+    img: parkOne
+}, {
+    title: '园区缴纳社保企业',
+    value: 91,
+    ratio: '80%',
+    state: 0,
+    img: parktwo
+}]
+
 const gradationMun = [{
     name: "3A级企业",
     state: 3,
@@ -356,6 +460,16 @@ const setActiveTab = (index, value) => {
 };
 getClassificationList()
 
+
+
+/** 查询用户列表 */
+function obtainCreditScoreList() {
+    getCreditScoreList(queryParams.value).then((res) => {
+        console.log("评价分析:",res)
+    })
+}
+
+obtainCreditScoreList()
 // 如果需要的话，在beforeUnmount中清理资源
 import { onBeforeUnmount } from 'vue';
 onBeforeUnmount(() => {
@@ -429,7 +543,7 @@ onBeforeUnmount(() => {
             .leftTwoBox,
             .leftThreeBox {
                 height: 30%;
-                background-color: rgba($color: #000000, $alpha: .3);
+                background-color: rgba($color: #000000, $alpha: .6);
                 margin-bottom: 14px;
 
                 .leftOBTitle,
@@ -486,18 +600,18 @@ onBeforeUnmount(() => {
         .boxBottom {
             position: absolute;
             z-index: 999;
-            height: 270px;
+            height: 150px;
             bottom: 0;
             width: 860px;
             left: 530px;
             display: flex;
-            background-color: rgba($color: #000000, $alpha: .3);
 
-            .boxBttOne {
+            .parkLoan {
                 width: 50%;
                 height: 100%;
+                background-color: rgba($color: #000000, $alpha: .6);
 
-                .leftOBTitle {
+                .PCFLTitle {
                     height: 40px;
                     color: white;
                     line-height: 40px;
@@ -507,16 +621,60 @@ onBeforeUnmount(() => {
                     background-size: 100% 100%;
                 }
 
-                .leftOBContent {
+                .PCFLContent {
                     height: calc(100% - 40px);
+
+                    .PCFLNumber {
+                        height: 50%;
+                        display: flex;
+                        justify-content: space-around;
+                        align-items: center;
+
+                        .RPCBData {
+
+                            .RPCBDNumber {
+                                font-weight: normal;
+                                font-size: 24px;
+                                color: #21F2FF;
+                            }
+
+                            .RPCBDName {
+                                font-weight: 500;
+                                font-size: 14px;
+                                color: #C9E2FF;
+                            }
+                        }
+                    }
+
+                    .PCFLImg {
+                        margin-top: -40px;
+                        display: flex;
+                        justify-content: space-around;
+                        align-items: center;
+                    }
+
+                    // .RPCBox {
+                    //     width: 100%;
+                    //     height: 70%;
+                    //     display: flex;
+                    //     align-items: center;
+                    //     justify-content: center;
+
+                    //     .RPCBImg {
+                    //         width: 60px;
+                    //         height: 60px;
+                    //     }
+                    // }
                 }
             }
 
             .boxBttTwo {
                 width: 50%;
                 height: 100%;
+                margin-left: 10px;
+                background-color: rgba($color: #000000, $alpha: .6);
 
-                .leftOBTitle {
+                .businessManagTitle {
                     height: 40px;
                     color: white;
                     line-height: 40px;
@@ -526,8 +684,46 @@ onBeforeUnmount(() => {
                     background-size: 100% 100%;
                 }
 
-                .leftOBContent {
+                .businessManagContent {
                     height: calc(100% - 40px);
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+
+                    .RPCBox {
+                        width: 100%;
+                        height: 70%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+
+                        .RPCBImg {
+                            width: 60px;
+                            height: 60px;
+                        }
+
+                        .RPCBData {
+                            margin-left: 10px;
+
+                            .RPCBDNumber {
+                                font-weight: normal;
+                                font-size: 24px;
+                                color: #21F2FF;
+                            }
+
+                            .RPCBDName {
+                                font-weight: 500;
+                                font-size: 14px;
+                                color: #C9E2FF;
+                            }
+
+                            .RPCBDRatio {
+                                font-weight: 500;
+                                font-size: 14px;
+                                color: #C9E2FF;
+                            }
+                        }
+                    }
                 }
             }
         }
@@ -562,7 +758,7 @@ onBeforeUnmount(() => {
             .rightParkBox,
             .rightIndustryComplianceBox {
                 height: 30%;
-                background-color: rgba($color: #000000, $alpha: .3);
+                background-color: rgba($color: #000000, $alpha: .6);
                 margin-bottom: 14px;
 
                 .leftOBTitle,
@@ -625,12 +821,30 @@ onBeforeUnmount(() => {
                     grid-template-columns: repeat(1, 100%);
                     grid-template-rows: repeat(2, 50%);
                     align-items: center;
+                    justify-content: center;
 
-                    div {
+                    .RICBTCBoxOne {
                         width: 100%;
                         height: 100%;
                         background-image: url("../../assets/visualizationimg/imdustryCompliance.png");
                         background-size: 100% 100%;
+                        display: flex;
+                        justify-content: space-around;
+                        align-items: center;
+
+                        .proportion {
+                            font-weight: bold;
+                            font-size: 34px;
+                            color: #3BA9FF;
+                            line-height: 25px;
+                        }
+
+                        .administrativeS {
+                            font-weight: normal;
+                            font-size: 14px;
+                            color: #F8FEFF;
+                            line-height: 25px;
+                        }
                     }
                 }
             }