|
@@ -1,425 +1,450 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <div class="Vbox">
|
|
|
|
|
- <div class="head">
|
|
|
|
|
- <div class="VisTitle"></div>
|
|
|
|
|
- <div class="Vgradation">
|
|
|
|
|
- <div class="tab" v-for="(item, index) in gradationMun" :key="index" :class="{ active: activeTab === index }"
|
|
|
|
|
- @click="setActiveTab(index, item)">
|
|
|
|
|
- {{ item.name }}
|
|
|
|
|
|
|
+ <div class="Vbox">
|
|
|
|
|
+ <div class="head">
|
|
|
|
|
+ <div class="VisTitle"></div>
|
|
|
|
|
+ <div class="Vgradation">
|
|
|
|
|
+ <div class="tab" v-for="(item, index) in gradationMun" :key="index" :class="{ active: activeTab === index }"
|
|
|
|
|
+ @click="setActiveTab(index, item)">
|
|
|
|
|
+ {{ item.name }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="container">
|
|
|
|
|
+ <div class="center">
|
|
|
|
|
+ <div ref="mapContainer" class="allmap"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="left">
|
|
|
|
|
+ <div class="rightParkBox">
|
|
|
|
|
+ <div class="rightParkTtile">园区概况</div>
|
|
|
|
|
+ <div class="rightParkContent">
|
|
|
|
|
+ <div class="RPCBox" v-for="(item, index) in parkData" :key="index">
|
|
|
|
|
+ <div class="RPCBImg">
|
|
|
|
|
+ <img :src=item.img alt="">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="RPCBData">
|
|
|
|
|
+ <div class="RPCBDNumber">{{ item.value }}</div>
|
|
|
|
|
+ <div class="RPCBDName" v-html="item.title"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="leftTwoBox">
|
|
|
|
|
+ <div class="leftGDPTitle">园区生产总值(千元)</div>
|
|
|
|
|
+ <div class="leftGDPContent">
|
|
|
|
|
+ <baseEcharts :NamechartData="NamechartData" :ArrOneData="ArrOneData" :ArrTwoData="ArrTwoData">
|
|
|
|
|
+ </baseEcharts>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ <div class="leftThreeBox">
|
|
|
|
|
+ <div class="leftTaxationTitle">企业税收TOP10</div>
|
|
|
|
|
+ <el-scrollbar height="calc(100% - 40px)">
|
|
|
|
|
+ <div class="leftTaxationContent">
|
|
|
|
|
+ <div class="LTCKing" v-for="(item, index) in RanKingData" :key="index">
|
|
|
|
|
+ <div class="ranking">
|
|
|
|
|
+ <img :src=item.mig alt="">
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ <div class="companyName">{{ item.name }}</div>
|
|
|
|
|
+ <div class="companyValue">{{ item.value }}万元</div>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ </el-scrollbar>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="container">
|
|
|
|
|
- <div class="center">
|
|
|
|
|
- <div ref="mapContainer" class="allmap"></div>
|
|
|
|
|
|
|
+ <!-- <div>2</div> -->
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="boxBottom">
|
|
|
|
|
+ <div class="parkLoan">
|
|
|
|
|
+ <div class="PCFLTitle">园区特色融资贷款</div>
|
|
|
|
|
+ <div class="PCFLContent">
|
|
|
|
|
+ <div class="PCFLNumber">
|
|
|
|
|
+ <div class="RPCBData" v-for="(item, index) in sumUsingNumber" :key="index">
|
|
|
|
|
+ <div class="RPCBDNumber">{{ item.sum }}(万元)</div>
|
|
|
|
|
+ <div class="RPCBDName">{{ item.name }}</div>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="left">
|
|
|
|
|
- <div class="leftOneBox">
|
|
|
|
|
- <div class="leftOBTitle">企业评价分析</div>
|
|
|
|
|
- <div class="leftOBContent">
|
|
|
|
|
- <PieEcharts :message="PieChartData"></PieEcharts>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="leftTwoBox">
|
|
|
|
|
- <div class="leftGDPTitle">园区生产总值</div>
|
|
|
|
|
- <div class="leftGDPContent">
|
|
|
|
|
- <baseEcharts :NamechartData="NamechartData" :ArrOneData="ArrOneData" :ArrTwoData="ArrTwoData">
|
|
|
|
|
- </baseEcharts>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="leftThreeBox">
|
|
|
|
|
- <div class="leftTaxationTitle">企业税收TOP10</div>
|
|
|
|
|
- <el-scrollbar height="calc(100% - 40px)">
|
|
|
|
|
- <div class="leftTaxationContent">
|
|
|
|
|
- <div class="LTCKing" v-for="(item, index) in RanKingData" :key="index">
|
|
|
|
|
- <div class="ranking">
|
|
|
|
|
- <img :src=item.mig alt="">
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="companyName">{{ item.name }}</div>
|
|
|
|
|
- <div class="companyValue">{{ item.value }}万元</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </el-scrollbar>
|
|
|
|
|
- </div>
|
|
|
|
|
- <!-- <div>2</div> -->
|
|
|
|
|
|
|
+ <div class="PCFLImg" style="color:white;text-align:center">
|
|
|
|
|
+ <div v-for="(item, index) in sumUsingNumber" :key="index">
|
|
|
|
|
+ <div style="width: 7.5vw;"><img style="width: 100%;" :src=item.img></div>
|
|
|
|
|
+ <span>贷款企业数:{{ item.number }}</span>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
-
|
|
|
|
|
- <div class="boxBottom">
|
|
|
|
|
- <div class="parkLoan">
|
|
|
|
|
- <div class="PCFLTitle">园区特色融资贷款</div>
|
|
|
|
|
- <div class="PCFLContent">
|
|
|
|
|
- <div class="PCFLNumber">
|
|
|
|
|
- <div class="RPCBData" v-for="(item, index) in sumUsingNumber" :key="index">
|
|
|
|
|
- <div class="RPCBDNumber">{{ item.sum }}(万元)</div>
|
|
|
|
|
- <div class="RPCBDName">{{ item.name }}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="PCFLImg" style="color:white;text-align:center">
|
|
|
|
|
- <div v-for="(item, index) in sumUsingNumber" :key="index">
|
|
|
|
|
- <img :src=item.img>
|
|
|
|
|
- <span>贷款企业数:{{ item.number }}</span>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="boxBttTwo">
|
|
|
|
|
- <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>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="boxBttTwo">
|
|
|
|
|
+ <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>
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
- <div class="right">
|
|
|
|
|
- <div class="rightParkBox">
|
|
|
|
|
- <div class="rightParkTtile">园区概况</div>
|
|
|
|
|
- <div class="rightParkContent">
|
|
|
|
|
- <div class="RPCBox" v-for="(item, index) in parkData" :key="index">
|
|
|
|
|
- <div class="RPCBImg">
|
|
|
|
|
- <img :src=item.img alt="">
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="RPCBData">
|
|
|
|
|
- <div class="RPCBDNumber">{{ item.value }}</div>
|
|
|
|
|
- <div class="RPCBDName">{{ item.title }}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="rightIndustryComplianceBox">
|
|
|
|
|
- <div class="RICBTitle">行业合规</div>
|
|
|
|
|
- <div class="RICBTContent">
|
|
|
|
|
- <div class="RICBTCBoxOne">
|
|
|
|
|
- <div class="" style="
|
|
|
|
|
|
|
+ <div class="right">
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ <div class="leftOneBox">
|
|
|
|
|
+ <div class="leftOBTitle">企业评价分析</div>
|
|
|
|
|
+ <div class="leftOBContent">
|
|
|
|
|
+ <PieEcharts :message="PieChartData"></PieEcharts>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ <div class="rightIndustryComplianceBox">
|
|
|
|
|
+ <div class="RICBTitle">企业经营合规</div>
|
|
|
|
|
+ <div class="RICBTContent">
|
|
|
|
|
+ <div class="RICBTCBoxOne">
|
|
|
|
|
+ <div class="" style="
|
|
|
margin-left: 20px;" v-for="(item, index) in hyhgData" :key="index">
|
|
margin-left: 20px;" v-for="(item, index) in hyhgData" :key="index">
|
|
|
- <div class="proportion">{{ item.value }}</div>
|
|
|
|
|
- <div class="administrativeS">{{ item.name }}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="RICBTCBoxOne">
|
|
|
|
|
- <div class="" style="
|
|
|
|
|
|
|
+ <div class="proportion">{{ item.value }}</div>
|
|
|
|
|
+ <div class="administrativeS">{{ item.name }}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="RICBTCBoxOne">
|
|
|
|
|
+ <div class="" style="
|
|
|
margin-left: 20px;" v-for="(item, index) in xzqzzxData" :key="index">
|
|
margin-left: 20px;" v-for="(item, index) in xzqzzxData" :key="index">
|
|
|
- <div class="proportion">{{ item.value }}</div>
|
|
|
|
|
- <div class="administrativeS">{{ item.name }}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <!-- <div class="RICBTCBoxTwo"></div> -->
|
|
|
|
|
|
|
+ <div class="proportion">{{ item.value }}</div>
|
|
|
|
|
+ <div class="administrativeS">{{ item.name }}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <!-- <div class="RICBTCBoxTwo"></div> -->
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="leftOneBox">
|
|
|
|
|
+ <div class="leftOBTitle">风险预警</div>
|
|
|
|
|
+ <el-scrollbar height="calc(100% - 40px)">
|
|
|
|
|
+ <div class="leftOBContent">
|
|
|
|
|
+ <div class="HTB_CB_List">
|
|
|
|
|
+ <div class="HTBCBL_table" v-for="(itemss, index) in ssyjList" :key="index"
|
|
|
|
|
+ :style="{ backgroundImage: 'url(' + itemss.img + ')' }">
|
|
|
|
|
+ <div class="HTBTCL_data">
|
|
|
|
|
+ <div class="HTBTCLD_text"
|
|
|
|
|
+ :style="{ color: itemss.state == 0 ? '#FF0000' : itemss.state == 1 ? '#D9AF36' : '', }">
|
|
|
|
|
+ {{ itemss.name }}
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="HTBTCL_time">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ {{ itemss.time }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="leftOneBox">
|
|
|
|
|
- <div class="leftOBTitle">风险预警</div>
|
|
|
|
|
- <el-scrollbar height="calc(100% - 40px)">
|
|
|
|
|
- <div class="leftOBContent">
|
|
|
|
|
- <div class="HTB_CB_List">
|
|
|
|
|
- <div class="HTBCBL_table" v-for="(itemss, index) in ssyjList" :key="index"
|
|
|
|
|
- :style="{ backgroundImage: 'url(' + itemss.img + ')' }">
|
|
|
|
|
- <div class="HTBTCL_data">
|
|
|
|
|
- <div class="HTBTCLD_text"
|
|
|
|
|
- :style="{ color: itemss.state == 0 ? '#FF0000' : itemss.state == 1 ? '#D9AF36' : '', }">
|
|
|
|
|
- {{ itemss.name }}
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="HTBTCL_time">
|
|
|
|
|
- <div>
|
|
|
|
|
- {{ itemss.time }}
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <!-- <baseEcharts></baseEcharts> -->
|
|
|
|
|
- </div>
|
|
|
|
|
- </el-scrollbar>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <!-- <baseEcharts></baseEcharts> -->
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ </el-scrollbar>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
+ </div>
|
|
|
</template>
|
|
</template>
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { ref, onMounted, computed } from 'vue';
|
|
|
|
|
|
|
+import one from '@/assets/visualizationimg/one.png';
|
|
|
|
|
+import two from '@/assets/visualizationimg/two.png';
|
|
|
|
|
+import three from '@/assets/visualizationimg/three.png';
|
|
|
|
|
+import four from '@/assets/visualizationimg/four.png';
|
|
|
|
|
+import five from '@/assets/visualizationimg/five.png';
|
|
|
|
|
+import six from '@/assets/visualizationimg/six.png';
|
|
|
|
|
+import seven from '@/assets/visualizationimg/seven.png';
|
|
|
|
|
+import eight from '@/assets/visualizationimg/eight.png';
|
|
|
|
|
+import nine from '@/assets/visualizationimg/nine.png';
|
|
|
|
|
+import ten from '@/assets/visualizationimg/ten.png';
|
|
|
|
|
+import {ref, onMounted, computed, reactive} from 'vue';
|
|
|
import baseEcharts from '@/components/baseEcharts/index.vue'
|
|
import baseEcharts from '@/components/baseEcharts/index.vue'
|
|
|
import PieEcharts from '@/components/baseEcharts/pieChart.vue'
|
|
import PieEcharts from '@/components/baseEcharts/pieChart.vue'
|
|
|
|
|
+import sumUsingNumberOne from '@/assets/visualizationimg/onepick.png';
|
|
|
|
|
+import sumUsingNumberTwo from '@/assets/visualizationimg/twopack.png';
|
|
|
|
|
+import sumUsingNumberthree from '@/assets/visualizationimg/threepick.png';
|
|
|
import {
|
|
import {
|
|
|
- getClassificationValueData
|
|
|
|
|
- , getLngLatValueData
|
|
|
|
|
- , getCreditScoreList
|
|
|
|
|
- , getTrossDomesticProduct
|
|
|
|
|
- , getTopTenTaxation
|
|
|
|
|
- , getXiaoxiangCaiyinLoan
|
|
|
|
|
- , getTechnologyLoan
|
|
|
|
|
- , getHuiyuanLoan
|
|
|
|
|
- , getNumberOfEnterprises
|
|
|
|
|
- , getListedCompanies
|
|
|
|
|
- , getHighTechEnterprises
|
|
|
|
|
- , getTechnologySmallAndmediumSizedEnterprises
|
|
|
|
|
- , getPatentInformation
|
|
|
|
|
- , getAdministrativeSanction
|
|
|
|
|
- , getAdministrativeEnforcement
|
|
|
|
|
- , getBusinessAdnormalities
|
|
|
|
|
- , getDishonestDebtor
|
|
|
|
|
- , getSocialSecurity
|
|
|
|
|
-} from '@/api/visualization/index'
|
|
|
|
|
|
|
+ getClassificationValueData
|
|
|
|
|
+ , getLngLatValueData
|
|
|
|
|
+ , getCreditScoreList
|
|
|
|
|
+ , getTrossDomesticProduct
|
|
|
|
|
+ , getTopTenTaxation
|
|
|
|
|
+ , getXiaoxiangCaiyinLoan
|
|
|
|
|
+ , getTechnologyLoan
|
|
|
|
|
+ , getHuiyuanLoan
|
|
|
|
|
+ , getNumberOfEnterprises
|
|
|
|
|
+ , getListedCompanies
|
|
|
|
|
+ , getHighTechEnterprises
|
|
|
|
|
+ , getTechnologySmallAndmediumSizedEnterprises
|
|
|
|
|
+ , getPatentInformation
|
|
|
|
|
+ , getAdministrativeSanction
|
|
|
|
|
+ , getAdministrativeEnforcement
|
|
|
|
|
+ , getBusinessAdnormalities
|
|
|
|
|
+ , getDishonestDebtor
|
|
|
|
|
+ , getSocialSecurity, getTaxes
|
|
|
|
|
+} from '@/api/visualization'
|
|
|
|
|
+
|
|
|
|
|
+import parkOne from '@/assets/visualizationimg/parkOne.png';
|
|
|
|
|
+import parktwo from '@/assets/visualizationimg/parktwo.png';
|
|
|
|
|
+import parkthree from '@/assets/visualizationimg/parkthree.png';
|
|
|
|
|
+import parkfour from '@/assets/visualizationimg/parkfour.png';
|
|
|
|
|
+import parkfive from '@/assets/visualizationimg/parkfive.png';
|
|
|
|
|
+import parksix from '@/assets/visualizationimg/parksix.png';
|
|
|
|
|
+import gaojingkuang from '@/assets/visualizationimg/gaojingkuang.png';
|
|
|
|
|
+import zhuyikuang from '@/assets/visualizationimg/zhuyikuang.png';
|
|
|
|
|
+import {onBeforeUnmount} from 'vue';
|
|
|
|
|
+import {getLastQuarterYoY2} from '@/api/buscmonitoring';
|
|
|
|
|
|
|
|
const mapContainer = ref(null);
|
|
const mapContainer = ref(null);
|
|
|
let map = null;
|
|
let map = null;
|
|
|
let marker = null
|
|
let marker = null
|
|
|
|
|
+const companyNumber = ref();
|
|
|
|
|
|
|
|
const data = reactive({
|
|
const data = reactive({
|
|
|
- form: {},
|
|
|
|
|
- queryParams: {
|
|
|
|
|
- pageNum: 1,
|
|
|
|
|
- pageSize: 100000,
|
|
|
|
|
- unifiedSocialCreditCode: '',
|
|
|
|
|
- condition: "",
|
|
|
|
|
- grade: null,
|
|
|
|
|
- total: null
|
|
|
|
|
- },
|
|
|
|
|
|
|
+ form: {},
|
|
|
|
|
+ queryParams: {
|
|
|
|
|
+ pageNum: 1,
|
|
|
|
|
+ pageSize: 100000,
|
|
|
|
|
+ unifiedSocialCreditCode: '',
|
|
|
|
|
+ condition: "",
|
|
|
|
|
+ grade: null,
|
|
|
|
|
+ total: null
|
|
|
|
|
+ },
|
|
|
|
|
+})
|
|
|
|
|
+const {queryParams} = toRefs(data)
|
|
|
|
|
+const getCurrentQuarter = () => {
|
|
|
|
|
+ const month = new Date().getMonth() + 1;
|
|
|
|
|
+ return Math.ceil(month / 3);
|
|
|
|
|
+};
|
|
|
|
|
+const specialQuarter = computed(() => {
|
|
|
|
|
+ let a = getCurrentQuarter()-2;
|
|
|
|
|
+ if(a == 0){
|
|
|
|
|
+ a = 4
|
|
|
|
|
+ }else if(a == -1){
|
|
|
|
|
+ a = 3
|
|
|
|
|
+ }
|
|
|
|
|
+ return a;
|
|
|
})
|
|
})
|
|
|
-const { queryParams } = toRefs(data)
|
|
|
|
|
|
|
+const RanKingData = ref([]);
|
|
|
|
|
+const rankImgIconArr = [one, two, three, four, five, six, seven, eight, nine, ten];
|
|
|
|
|
+const getTaxTop10 = async () => {
|
|
|
|
|
+ const res = await getLastQuarterYoY2(specialQuarter.value);
|
|
|
|
|
+ console.log(res,7777);
|
|
|
|
|
+ if (res.code == 200) {
|
|
|
|
|
+ res.data = res.data.slice(0, 10);
|
|
|
|
|
+ res.data.forEach(w => w.lastQuarterCurrentTotal = (w.lastQuarterCurrentTotal / 10000).toFixed(2));
|
|
|
|
|
+ res.data.sort((a, b) => b.lastQuarterCurrentTotal - a.lastQuarterCurrentTotal)
|
|
|
|
|
+ RanKingData.value = res.data.map((q, index) => ({
|
|
|
|
|
+ name: q.enterpriseName,
|
|
|
|
|
+ value: q.lastQuarterCurrentTotal,
|
|
|
|
|
+ mig: rankImgIconArr[index]
|
|
|
|
|
+ }))
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+getTaxTop10();
|
|
|
|
|
|
|
|
-const RanKingData = [{
|
|
|
|
|
- name: '湖南正清制药集团股份有限公司',
|
|
|
|
|
- value: '6506.4',
|
|
|
|
|
- mig: one
|
|
|
|
|
-}, {
|
|
|
|
|
- name: '怀化金弘再生资源有限公司',
|
|
|
|
|
- value: '5835.6',
|
|
|
|
|
- mig: two
|
|
|
|
|
-}, {
|
|
|
|
|
- name: '湖南骏泰新材料科技有限责任公司',
|
|
|
|
|
- value: '5581.5',
|
|
|
|
|
- mig: three
|
|
|
|
|
-}, {
|
|
|
|
|
- name: '金升阳(怀化)科技有限公司',
|
|
|
|
|
- value: '5276.0',
|
|
|
|
|
- mig: four
|
|
|
|
|
-}, {
|
|
|
|
|
- name: '怀化恒枫饮料有限公司',
|
|
|
|
|
- value: '4000',
|
|
|
|
|
- mig: five
|
|
|
|
|
-}, {
|
|
|
|
|
- name: '湖南诚路管业科技有限公司',
|
|
|
|
|
- value: '2417.3',
|
|
|
|
|
- mig: six
|
|
|
|
|
-}, {
|
|
|
|
|
- name: '湖南红宝科技开发有限公司',
|
|
|
|
|
- value: '158.6',
|
|
|
|
|
- mig: seven
|
|
|
|
|
-}, {
|
|
|
|
|
- name: '湖南乔伟生态科技新材料股份有限公司',
|
|
|
|
|
- value: '562.2',
|
|
|
|
|
- mig: eight
|
|
|
|
|
-}, {
|
|
|
|
|
- name: '湖南昱烯瓴新材料有限公司',
|
|
|
|
|
- value: '525.7',
|
|
|
|
|
- mig: nine
|
|
|
|
|
-}, {
|
|
|
|
|
- name: '湖南千源铝业有限公司',
|
|
|
|
|
- value: '378.9',
|
|
|
|
|
- mig: ten
|
|
|
|
|
-}]
|
|
|
|
|
const gradationMun = [{
|
|
const gradationMun = [{
|
|
|
- name: "3A级企业",
|
|
|
|
|
- state: 3,
|
|
|
|
|
- type: 'AAA'
|
|
|
|
|
|
|
+ name: "3A级企业",
|
|
|
|
|
+ state: 3,
|
|
|
|
|
+ type: 'AAA'
|
|
|
}, {
|
|
}, {
|
|
|
- name: "2A级企业",
|
|
|
|
|
- state: 2,
|
|
|
|
|
- type: 'AA'
|
|
|
|
|
|
|
+ name: "2A级企业",
|
|
|
|
|
+ state: 2,
|
|
|
|
|
+ type: 'AA'
|
|
|
}, {
|
|
}, {
|
|
|
- name: "1A级企业",
|
|
|
|
|
- state: 1,
|
|
|
|
|
- type: 'A'
|
|
|
|
|
|
|
+ name: "1A级企业",
|
|
|
|
|
+ state: 1,
|
|
|
|
|
+ type: 'A'
|
|
|
}, {
|
|
}, {
|
|
|
- name: "B级企业",
|
|
|
|
|
- state: 4,
|
|
|
|
|
- type: 'B'
|
|
|
|
|
|
|
+ name: "B级企业",
|
|
|
|
|
+ state: 4,
|
|
|
|
|
+ type: 'B'
|
|
|
}, {
|
|
}, {
|
|
|
- name: "C级企业",
|
|
|
|
|
- state: 5,
|
|
|
|
|
- type: 'C'
|
|
|
|
|
|
|
+ name: "C级企业",
|
|
|
|
|
+ state: 5,
|
|
|
|
|
+ type: 'C'
|
|
|
}, {
|
|
}, {
|
|
|
- name: "D级企业",
|
|
|
|
|
- state: 6,
|
|
|
|
|
- type: 'D'
|
|
|
|
|
|
|
+ name: "D级企业",
|
|
|
|
|
+ state: 6,
|
|
|
|
|
+ type: 'D'
|
|
|
}, {
|
|
}, {
|
|
|
- name: "全部企业",
|
|
|
|
|
- state: 0,
|
|
|
|
|
- type: ''
|
|
|
|
|
|
|
+ name: "全部企业",
|
|
|
|
|
+ state: 0,
|
|
|
|
|
+ type: ''
|
|
|
}]
|
|
}]
|
|
|
const activeTab = ref(6); // 默认激活第一个tab
|
|
const activeTab = ref(6); // 默认激活第一个tab
|
|
|
// const resultArray = ref;
|
|
// const resultArray = ref;
|
|
|
|
|
|
|
|
onMounted(async () => {
|
|
onMounted(async () => {
|
|
|
- // 初始化地图
|
|
|
|
|
- map = new BMapGL.Map(mapContainer.value);
|
|
|
|
|
- var point = new BMapGL.Point(109.94211746215822, 27.377939585109653);
|
|
|
|
|
- map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
|
|
|
|
|
- map.enableScrollWheelZoom(true);
|
|
|
|
|
- map.setMinZoom(15);
|
|
|
|
|
- map.setMaxZoom(19);
|
|
|
|
|
- map.setMapStyleV2({
|
|
|
|
|
- styleId: '62ce43ad2a1362c23e612b783d7406e7'
|
|
|
|
|
- });
|
|
|
|
|
- map.setTilt(50);
|
|
|
|
|
- map.disableInertialDragging();
|
|
|
|
|
-
|
|
|
|
|
- // 定义允许的拖拽范围
|
|
|
|
|
- const allowedBounds = new BMapGL.Bounds(
|
|
|
|
|
- new BMapGL.Point(109.90207672119142, 27.365250190931242), // 西南角
|
|
|
|
|
- new BMapGL.Point(109.97014045715333, 27.422461872492594) // 东北角
|
|
|
|
|
- );
|
|
|
|
|
-
|
|
|
|
|
- // 监听拖拽结束事件
|
|
|
|
|
- map.addEventListener('dragend', function () {
|
|
|
|
|
- // 获取当前地图的中心点
|
|
|
|
|
- const center = map.getCenter();
|
|
|
|
|
- // 检查中心点是否在允许的范围内
|
|
|
|
|
- if (!allowedBounds.containsPoint(center)) {
|
|
|
|
|
- // 如果不在范围内,将地图中心调整回允许范围的中心点
|
|
|
|
|
- const adjustCenter = allowedBounds.getCenter();
|
|
|
|
|
- map.panTo(adjustCenter);
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- // 导入JSON文件
|
|
|
|
|
- try {
|
|
|
|
|
- var path = [];
|
|
|
|
|
- // await Promise.all(
|
|
|
|
|
- // 假设你有一个json文件,里面包含了管辖区域的边界数据
|
|
|
|
|
- fetch('jwdata.json').then(response => response.json()).then(data => {
|
|
|
|
|
- var points = data
|
|
|
|
|
- for (var j = 0; j < points.length; j++) {
|
|
|
|
|
- var lng = points[j].split(',')[0];
|
|
|
|
|
- var lat = points[j].split(',')[1];
|
|
|
|
|
- path.push(new BMapGL.Point(lng, lat));
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- var prism = new BMapGL.Prism(path, 10, {
|
|
|
|
|
- topFillColor: '#5679ea',
|
|
|
|
|
- topFillOpacity: 0.5,
|
|
|
|
|
- sideFillColor: '#5679ea',
|
|
|
|
|
- sideFillOpacity: 0.5
|
|
|
|
|
- });
|
|
|
|
|
- map.addOverlay(prism);
|
|
|
|
|
- })
|
|
|
|
|
-
|
|
|
|
|
- } catch (error) {
|
|
|
|
|
- console.error('Error loading JSON data:', error);
|
|
|
|
|
|
|
+ // 初始化地图
|
|
|
|
|
+ map = new BMapGL.Map(mapContainer.value);
|
|
|
|
|
+ var point = new BMapGL.Point(109.94211746215822, 27.377939585109653);
|
|
|
|
|
+ map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
|
|
|
|
|
+ map.enableScrollWheelZoom(true);
|
|
|
|
|
+ map.setMinZoom(15);
|
|
|
|
|
+ map.setMaxZoom(19);
|
|
|
|
|
+ map.setMapStyleV2({
|
|
|
|
|
+ styleId: '62ce43ad2a1362c23e612b783d7406e7'
|
|
|
|
|
+ });
|
|
|
|
|
+ map.setTilt(50);
|
|
|
|
|
+ map.disableInertialDragging();
|
|
|
|
|
+
|
|
|
|
|
+ // 定义允许的拖拽范围
|
|
|
|
|
+ const allowedBounds = new BMapGL.Bounds(
|
|
|
|
|
+ new BMapGL.Point(109.90207672119142, 27.365250190931242), // 西南角
|
|
|
|
|
+ new BMapGL.Point(109.97014045715333, 27.422461872492594) // 东北角
|
|
|
|
|
+ );
|
|
|
|
|
+
|
|
|
|
|
+ // 监听拖拽结束事件
|
|
|
|
|
+ map.addEventListener('dragend', function () {
|
|
|
|
|
+ // 获取当前地图的中心点
|
|
|
|
|
+ const center = map.getCenter();
|
|
|
|
|
+ // 检查中心点是否在允许的范围内
|
|
|
|
|
+ if (!allowedBounds.containsPoint(center)) {
|
|
|
|
|
+ // 如果不在范围内,将地图中心调整回允许范围的中心点
|
|
|
|
|
+ const adjustCenter = allowedBounds.getCenter();
|
|
|
|
|
+ map.panTo(adjustCenter);
|
|
|
}
|
|
}
|
|
|
|
|
+ });
|
|
|
|
|
+ // 导入JSON文件
|
|
|
|
|
+ try {
|
|
|
|
|
+ var path = [];
|
|
|
|
|
+ // await Promise.all(
|
|
|
|
|
+ // 假设你有一个json文件,里面包含了管辖区域的边界数据
|
|
|
|
|
+ fetch('jwdata.json').then(response => response.json()).then(data => {
|
|
|
|
|
+ var points = data
|
|
|
|
|
+ for (var j = 0; j < points.length; j++) {
|
|
|
|
|
+ var lng = points[j].split(',')[0];
|
|
|
|
|
+ var lat = points[j].split(',')[1];
|
|
|
|
|
+ path.push(new BMapGL.Point(lng, lat));
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ var prism = new BMapGL.Prism(path, 10, {
|
|
|
|
|
+ topFillColor: '#5679ea',
|
|
|
|
|
+ topFillOpacity: 0.5,
|
|
|
|
|
+ sideFillColor: '#5679ea',
|
|
|
|
|
+ sideFillOpacity: 0.5
|
|
|
|
|
+ });
|
|
|
|
|
+ map.addOverlay(prism);
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ // console.error('Error loading JSON data:', error);
|
|
|
|
|
+ }
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
// );
|
|
// );
|
|
|
/** 查询用户列表 */
|
|
/** 查询用户列表 */
|
|
|
function getClassificationList() {
|
|
function getClassificationList() {
|
|
|
- getLngLatValueData(queryParams.value).then((res) => {
|
|
|
|
|
- const LNgLatData = res.data;
|
|
|
|
|
- // console.log("外层", res.data)
|
|
|
|
|
- getclassData(LNgLatData)
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ getLngLatValueData(queryParams.value).then((res) => {
|
|
|
|
|
+ const LNgLatData = res.data;
|
|
|
|
|
+ // console.log("外层", res.data)
|
|
|
|
|
+ getclassData(LNgLatData)
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
function getclassData(lngLat) {
|
|
function getclassData(lngLat) {
|
|
|
|
|
|
|
|
- getClassificationValueData(queryParams.value).then((res) => {
|
|
|
|
|
- const array1 = lngLat;
|
|
|
|
|
- const array2 = res.data.result;
|
|
|
|
|
|
|
+ getClassificationValueData(queryParams.value).then((res) => {
|
|
|
|
|
+ const array1 = lngLat;
|
|
|
|
|
+ const array2 = res.data.result;
|
|
|
|
|
|
|
|
- const mergedData = {};
|
|
|
|
|
- array1.forEach(item => {
|
|
|
|
|
- mergedData[item.unifiedSocialCreditCode] = { ...item };
|
|
|
|
|
- });
|
|
|
|
|
- array2.forEach(item => {
|
|
|
|
|
- if (mergedData[item.unifiedSocialCreditCode]) {
|
|
|
|
|
- mergedData[item.unifiedSocialCreditCode] = { ...mergedData[item.unifiedSocialCreditCode], ...item };
|
|
|
|
|
- } else {
|
|
|
|
|
- mergedData[item.unifiedSocialCreditCode] = { ...item };
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ const mergedData = {};
|
|
|
|
|
+ array1.forEach(item => {
|
|
|
|
|
+ mergedData[item.unifiedSocialCreditCode] = {...item};
|
|
|
|
|
+ });
|
|
|
|
|
+ array2.forEach(item => {
|
|
|
|
|
+ if (mergedData[item.unifiedSocialCreditCode]) {
|
|
|
|
|
+ mergedData[item.unifiedSocialCreditCode] = {...mergedData[item.unifiedSocialCreditCode], ...item};
|
|
|
|
|
+ } else {
|
|
|
|
|
+ mergedData[item.unifiedSocialCreditCode] = {...item};
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ const resultArray = Object.values(mergedData);
|
|
|
|
|
+
|
|
|
|
|
+ resultArray.forEach(item => {
|
|
|
|
|
+ if (item.grade) {
|
|
|
|
|
+ const markers = new BMapGL.Point(item.longitude, item.latitude)
|
|
|
|
|
+ marker = new BMapGL.Marker(markers)
|
|
|
|
|
+ map.addOverlay(marker);
|
|
|
|
|
+ // 创建信息窗口
|
|
|
|
|
+ var opts = {
|
|
|
|
|
+ width: 300,
|
|
|
|
|
+ // height: 100,
|
|
|
|
|
+ title: item.enterpriseName
|
|
|
|
|
+ };
|
|
|
|
|
+ var infoWindow = new BMapGL.InfoWindow("等级:" + item.grade + "<br/>"
|
|
|
|
|
+ + "统一信用代码:" + item.unifiedSocialCreditCode + "<br/>"
|
|
|
|
|
+ + "总分:" + item.total + "<br/>"
|
|
|
|
|
+ + "负责人:" + item.enterpriseLeader + "<br/>"
|
|
|
|
|
+ + "联系方式:" + item.contactPhone, opts);
|
|
|
|
|
+ // 点标记添加点击事件
|
|
|
|
|
+ marker.addEventListener('click', function () {
|
|
|
|
|
+ map.openInfoWindow(infoWindow, markers); // 开启信息窗口
|
|
|
});
|
|
});
|
|
|
- const resultArray = Object.values(mergedData);
|
|
|
|
|
-
|
|
|
|
|
- resultArray.forEach(item => {
|
|
|
|
|
- if (item.grade) {
|
|
|
|
|
- const markers = new BMapGL.Point(item.longitude, item.latitude)
|
|
|
|
|
- marker = new BMapGL.Marker(markers)
|
|
|
|
|
- map.addOverlay(marker);
|
|
|
|
|
- // 创建信息窗口
|
|
|
|
|
- var opts = {
|
|
|
|
|
- width: 300,
|
|
|
|
|
- // height: 100,
|
|
|
|
|
- title: item.enterpriseName
|
|
|
|
|
- };
|
|
|
|
|
- var infoWindow = new BMapGL.InfoWindow("等级:" + item.grade + "<br/>"
|
|
|
|
|
- + "统一信用代码:" + item.unifiedSocialCreditCode + "<br/>"
|
|
|
|
|
- + "总分:" + item.total + "<br/>"
|
|
|
|
|
- + "负责人:" + item.enterpriseLeader + "<br/>"
|
|
|
|
|
- + "联系方式:" + item.contactPhone, opts);
|
|
|
|
|
- // 点标记添加点击事件
|
|
|
|
|
- marker.addEventListener('click', function () {
|
|
|
|
|
- map.openInfoWindow(infoWindow, markers); // 开启信息窗口
|
|
|
|
|
- });
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ }
|
|
|
})
|
|
})
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
const setActiveTab = (index, value) => {
|
|
const setActiveTab = (index, value) => {
|
|
|
- //获取地图上所有的覆盖物
|
|
|
|
|
- var allOverlay = map.getOverlays();
|
|
|
|
|
- for (var i = 0; i < allOverlay.length; i++) {
|
|
|
|
|
- console.log(11, allOverlay[i].toString())
|
|
|
|
|
- if (allOverlay[i].toString() == "Marker") {
|
|
|
|
|
- map.removeOverlay(allOverlay[i]);
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ //获取地图上所有的覆盖物
|
|
|
|
|
+ var allOverlay = map.getOverlays();
|
|
|
|
|
+ for (var i = 0; i < allOverlay.length; i++) {
|
|
|
|
|
+ // console.log(11, allOverlay[i].toString())
|
|
|
|
|
+ if (allOverlay[i].toString() == "Marker") {
|
|
|
|
|
+ map.removeOverlay(allOverlay[i]);
|
|
|
}
|
|
}
|
|
|
- queryParams.value.condition = value.type;
|
|
|
|
|
- getClassificationList();
|
|
|
|
|
- activeTab.value = index;
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+ queryParams.value.condition = value.type;
|
|
|
|
|
+ getClassificationList();
|
|
|
|
|
+ activeTab.value = index;
|
|
|
};
|
|
};
|
|
|
getClassificationList()
|
|
getClassificationList()
|
|
|
|
|
|
|
|
|
|
|
|
|
/** 查询评价分析 */
|
|
/** 查询评价分析 */
|
|
|
const PieChartData = ref([]);
|
|
const PieChartData = ref([]);
|
|
|
-function obtainCreditScoreList() {
|
|
|
|
|
- getCreditScoreList(queryParams.value).then((res) => {
|
|
|
|
|
- const state1Array = [];
|
|
|
|
|
- const state2Array = [];
|
|
|
|
|
- const state3Array = [];
|
|
|
|
|
- const state4Array = [];
|
|
|
|
|
- const state5Array = [];
|
|
|
|
|
- const state6Array = [];
|
|
|
|
|
- res.data.result.forEach(item => {
|
|
|
|
|
- if (item.grade === 'AAA') {
|
|
|
|
|
- state1Array.push(item);
|
|
|
|
|
- } else if (item.grade === 'AA') {
|
|
|
|
|
- state2Array.push(item);
|
|
|
|
|
- } else if (item.grade === 'A') {
|
|
|
|
|
- state3Array.push(item);
|
|
|
|
|
- } else if (item.grade === 'B') {
|
|
|
|
|
- state4Array.push(item);
|
|
|
|
|
- } else if (item.grade === 'C') {
|
|
|
|
|
- state5Array.push(item);
|
|
|
|
|
- } else if (item.grade === 'D') {
|
|
|
|
|
- state6Array.push(item);
|
|
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
- PieChartData.value = [
|
|
|
|
|
- { value: state1Array.length, name: 'AAA' },
|
|
|
|
|
- { value: state2Array.length, name: 'AA' },
|
|
|
|
|
- { value: state3Array.length, name: 'A' },
|
|
|
|
|
- { value: state4Array.length, name: 'B' },
|
|
|
|
|
- { value: state5Array.length, name: 'C' },
|
|
|
|
|
- { value: state6Array.length, name: 'D' },
|
|
|
|
|
- ]
|
|
|
|
|
- });
|
|
|
|
|
- })
|
|
|
|
|
|
|
+function obtainCreditScoreList() {
|
|
|
|
|
+ getCreditScoreList(queryParams.value).then((res) => {
|
|
|
|
|
+ const state1Array = [];
|
|
|
|
|
+ const state2Array = [];
|
|
|
|
|
+ const state3Array = [];
|
|
|
|
|
+ const state4Array = [];
|
|
|
|
|
+ const state5Array = [];
|
|
|
|
|
+ const state6Array = [];
|
|
|
|
|
+ res.data.result.forEach(item => {
|
|
|
|
|
+ if (item.grade === 'AAA') {
|
|
|
|
|
+ state1Array.push(item);
|
|
|
|
|
+ } else if (item.grade === 'AA') {
|
|
|
|
|
+ state2Array.push(item);
|
|
|
|
|
+ } else if (item.grade === 'A') {
|
|
|
|
|
+ state3Array.push(item);
|
|
|
|
|
+ } else if (item.grade === 'B') {
|
|
|
|
|
+ state4Array.push(item);
|
|
|
|
|
+ } else if (item.grade === 'C') {
|
|
|
|
|
+ state5Array.push(item);
|
|
|
|
|
+ } else if (item.grade === 'D') {
|
|
|
|
|
+ state6Array.push(item);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ PieChartData.value = [
|
|
|
|
|
+ {value: state1Array.length, name: 'AAA'},
|
|
|
|
|
+ {value: state2Array.length, name: 'AA'},
|
|
|
|
|
+ {value: state3Array.length, name: 'A'},
|
|
|
|
|
+ {value: state4Array.length, name: 'B'},
|
|
|
|
|
+ {value: state5Array.length, name: 'C'},
|
|
|
|
|
+ {value: state6Array.length, name: 'D'},
|
|
|
|
|
+ ]
|
|
|
|
|
+ });
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/** 查询产值 */
|
|
/** 查询产值 */
|
|
@@ -430,765 +455,993 @@ const currentDate = ref(new Date());//获取季度值
|
|
|
|
|
|
|
|
//当前季度
|
|
//当前季度
|
|
|
const currentQuarter = computed(() => {
|
|
const currentQuarter = computed(() => {
|
|
|
- const month = currentDate.value.getMonth();
|
|
|
|
|
- return Math.floor(month / 3) + 1;
|
|
|
|
|
|
|
+ const month = currentDate.value.getMonth();
|
|
|
|
|
+ return Math.floor(month / 3) + 1;
|
|
|
});
|
|
});
|
|
|
//上一个季度
|
|
//上一个季度
|
|
|
const previousQuarter = computed(() => {
|
|
const previousQuarter = computed(() => {
|
|
|
- return currentQuarter.value <= 1 ? 4 : currentQuarter.value - 1;
|
|
|
|
|
|
|
+ return currentQuarter.value <= 1 ? 4 : currentQuarter.value - 1;
|
|
|
});
|
|
});
|
|
|
//当前年份
|
|
//当前年份
|
|
|
const currentYear = computed(() => currentDate.value.getFullYear());
|
|
const currentYear = computed(() => currentDate.value.getFullYear());
|
|
|
// 上一年
|
|
// 上一年
|
|
|
const lastYear = computed(() => currentDate.value.getFullYear() - 1);
|
|
const lastYear = computed(() => currentDate.value.getFullYear() - 1);
|
|
|
const quarterToAmountMap = {
|
|
const quarterToAmountMap = {
|
|
|
- '1': 'firstQuarterAmount',
|
|
|
|
|
- '2': 'secondQuarterAmount',
|
|
|
|
|
- '3': 'thirdQuarterAmount',
|
|
|
|
|
- '4': 'fourthQuarterAmount'
|
|
|
|
|
|
|
+ '1': 'firstQuarterAmount',
|
|
|
|
|
+ '2': 'secondQuarterAmount',
|
|
|
|
|
+ '3': 'thirdQuarterAmount',
|
|
|
|
|
+ '4': 'fourthQuarterAmount'
|
|
|
};
|
|
};
|
|
|
|
|
+
|
|
|
function obtaingetTrossDomesticProduct() {
|
|
function obtaingetTrossDomesticProduct() {
|
|
|
- getTrossDomesticProduct(queryParams.value).then((res) => {
|
|
|
|
|
- const state2023Array = [];
|
|
|
|
|
- const state2024Array = [];
|
|
|
|
|
- const name = [];
|
|
|
|
|
-
|
|
|
|
|
- res.forEach(item => {
|
|
|
|
|
- if (item.annualAmount == lastYear.value) {
|
|
|
|
|
- if (quarterToAmountMap.hasOwnProperty(previousQuarter.value)) {
|
|
|
|
|
- const amountProperty = quarterToAmountMap[previousQuarter.value];
|
|
|
|
|
- state2023Array.push(item[amountProperty]);
|
|
|
|
|
- } else {
|
|
|
|
|
- console.error(`Invalid quarter: ${previousQuarter.value}`);
|
|
|
|
|
- }
|
|
|
|
|
- name.push(item.enterpriseName)
|
|
|
|
|
- } else if (item.annualAmount == currentYear.value) {
|
|
|
|
|
- if (quarterToAmountMap.hasOwnProperty(previousQuarter.value)) {
|
|
|
|
|
- const amountProperty = quarterToAmountMap[previousQuarter.value];
|
|
|
|
|
- state2024Array.push(item[amountProperty]);
|
|
|
|
|
- } else {
|
|
|
|
|
- console.error(`Invalid quarter: ${previousQuarter.value}`);
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- NamechartData.value = name
|
|
|
|
|
- ArrOneData.value = state2023Array
|
|
|
|
|
- ArrTwoData.value = state2024Array
|
|
|
|
|
- })
|
|
|
|
|
- // console.log(state2023Array,state2024Array)
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ getTrossDomesticProduct(queryParams.value).then((res) => {
|
|
|
|
|
+ const state2023Array = res.reduce((container, item)=>{
|
|
|
|
|
+ if(item.annualAmount == lastYear.value){
|
|
|
|
|
+ container[0] += item.firstQuarterAmount*1;
|
|
|
|
|
+ container[1] += item.secondQuarterAmount*1;
|
|
|
|
|
+ container[2] += item.thirdQuarterAmount*1;
|
|
|
|
|
+ container[3] += item.fourthQuarterAmount*1;
|
|
|
|
|
+ container[4] = container[0] + container[1] + container[2] + container[3];
|
|
|
|
|
+ }
|
|
|
|
|
+ return container;
|
|
|
|
|
+ },[0,0,0,0,0])
|
|
|
|
|
+ const state2024Array = res.reduce((container, item)=>{
|
|
|
|
|
+ if(item.annualAmount == currentYear.value){
|
|
|
|
|
+ container[0] += item.firstQuarterAmount*1;
|
|
|
|
|
+ container[1] += item.secondQuarterAmount*1;
|
|
|
|
|
+ container[2] += item.thirdQuarterAmount*1;
|
|
|
|
|
+ container[3] += item.fourthQuarterAmount*1;
|
|
|
|
|
+ container[4] = container[0] + container[1] + container[2] + container[3];
|
|
|
|
|
+ }
|
|
|
|
|
+ return container;
|
|
|
|
|
+ },[0,0,0,0,0])
|
|
|
|
|
+ const name = ['第一季度', '第二季度', '第三季度', '第四季度','年度'];
|
|
|
|
|
+ NamechartData.value = name;
|
|
|
|
|
+ ArrOneData.value = state2023Array.map(q=>q.toFixed(2))
|
|
|
|
|
+ ArrTwoData.value = state2024Array.map(q=>q.toFixed(2))
|
|
|
|
|
+ // res.forEach(item => {
|
|
|
|
|
+ // if (item.annualAmount == lastYear.value) {
|
|
|
|
|
+ // if (quarterToAmountMap.hasOwnProperty(previousQuarter.value)) {
|
|
|
|
|
+ // const amountProperty = quarterToAmountMap[previousQuarter.value];
|
|
|
|
|
+ // state2023Array.push(item[amountProperty]);
|
|
|
|
|
+ // } else {
|
|
|
|
|
+ // // console.error(`Invalid quarter: ${previousQuarter.value}`);
|
|
|
|
|
+ // }
|
|
|
|
|
+ // name.push(item.enterpriseName)
|
|
|
|
|
+ // } else if (item.annualAmount == currentYear.value) {
|
|
|
|
|
+ // if (quarterToAmountMap.hasOwnProperty(previousQuarter.value)) {
|
|
|
|
|
+ // const amountProperty = quarterToAmountMap[previousQuarter.value];
|
|
|
|
|
+ // state2024Array.push(item[amountProperty]);
|
|
|
|
|
+ // } else {
|
|
|
|
|
+ // // console.error(`Invalid quarter: ${previousQuarter.value}`);
|
|
|
|
|
+ // }
|
|
|
|
|
+ // }
|
|
|
|
|
+ // NamechartData.value = name
|
|
|
|
|
+ // ArrOneData.value = state2023Array
|
|
|
|
|
+ // ArrTwoData.value = state2024Array
|
|
|
|
|
+ // })
|
|
|
|
|
+ // console.log(state2023Array,state2024Array)
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-import one from '@/assets/visualizationimg/one.png';
|
|
|
|
|
-import two from '@/assets/visualizationimg/two.png';
|
|
|
|
|
-import three from '@/assets/visualizationimg/three.png';
|
|
|
|
|
-import four from '@/assets/visualizationimg/four.png';
|
|
|
|
|
-import five from '@/assets/visualizationimg/five.png';
|
|
|
|
|
-import six from '@/assets/visualizationimg/six.png';
|
|
|
|
|
-import seven from '@/assets/visualizationimg/seven.png';
|
|
|
|
|
-import eight from '@/assets/visualizationimg/eight.png';
|
|
|
|
|
-import nine from '@/assets/visualizationimg/nine.png';
|
|
|
|
|
-import ten from '@/assets/visualizationimg/ten.png';
|
|
|
|
|
|
|
+
|
|
|
const RanKingDatas = ref([])
|
|
const RanKingDatas = ref([])
|
|
|
|
|
+
|
|
|
/** 查询纳税Top10 */
|
|
/** 查询纳税Top10 */
|
|
|
function obtaingetTopTenTaxation() {
|
|
function obtaingetTopTenTaxation() {
|
|
|
- getTopTenTaxation(queryParams.value).then((res) => {
|
|
|
|
|
- if (quarterToAmountMap.hasOwnProperty(previousQuarter.value)) {
|
|
|
|
|
- const amountProperty = quarterToAmountMap[previousQuarter.value];
|
|
|
|
|
-
|
|
|
|
|
- const sortedItems = computed(() => {
|
|
|
|
|
- return [...res].sort((a, b) => b[amountProperty] - a[amountProperty]);
|
|
|
|
|
- });
|
|
|
|
|
- for(var i = 0;i < 10; i++){
|
|
|
|
|
- RanKingDatas.value.push({
|
|
|
|
|
- name:sortedItems.value[i].enterpriseName,
|
|
|
|
|
- value:sortedItems.value[i].amountProperty
|
|
|
|
|
- })
|
|
|
|
|
- }
|
|
|
|
|
- console.log("查询纳税Top10:", sortedItems,RanKingDatas)
|
|
|
|
|
|
|
+ getTopTenTaxation(queryParams.value).then((res) => {
|
|
|
|
|
+ if (quarterToAmountMap.hasOwnProperty(previousQuarter.value)) {
|
|
|
|
|
+ const amountProperty = quarterToAmountMap[previousQuarter.value];
|
|
|
|
|
+
|
|
|
|
|
+ const sortedItems = computed(() => {
|
|
|
|
|
+ return [...res].sort((a, b) => b[amountProperty] - a[amountProperty]);
|
|
|
|
|
+ });
|
|
|
|
|
+ for (var i = 0; i < 10; i++) {
|
|
|
|
|
+ RanKingDatas.value.push({
|
|
|
|
|
+ name: sortedItems.value[i].enterpriseName,
|
|
|
|
|
+ value: sortedItems.value[i].amountProperty
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ // console.log("查询纳税Top10:", sortedItems, RanKingDatas)
|
|
|
|
|
|
|
|
- } else {
|
|
|
|
|
- console.error(`Invalid quarter: ${previousQuarter.value}`);
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // console.error(`Invalid quarter: ${previousQuarter.value}`);
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-import sumUsingNumberOne from '@/assets/visualizationimg/onepick.png';
|
|
|
|
|
-import sumUsingNumberTwo from '@/assets/visualizationimg/twopack.png';
|
|
|
|
|
-import sumUsingNumberthree from '@/assets/visualizationimg/threepick.png';
|
|
|
|
|
|
|
|
|
|
const sumUsingNumber = [
|
|
const sumUsingNumber = [
|
|
|
- {
|
|
|
|
|
- sum: '0',
|
|
|
|
|
- name: '潇湘财银贷',
|
|
|
|
|
- img: sumUsingNumberOne,
|
|
|
|
|
- number: ''
|
|
|
|
|
- }, {
|
|
|
|
|
- sum: '0',
|
|
|
|
|
- name: '科技贷',
|
|
|
|
|
- img: sumUsingNumberTwo,
|
|
|
|
|
- number: ''
|
|
|
|
|
- }, {
|
|
|
|
|
- sum: '0',
|
|
|
|
|
- name: '惠园贷',
|
|
|
|
|
- img: sumUsingNumberthree,
|
|
|
|
|
- number: ''
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ {
|
|
|
|
|
+ sum: '0',
|
|
|
|
|
+ name: '潇湘财银贷',
|
|
|
|
|
+ img: sumUsingNumberOne,
|
|
|
|
|
+ number: ''
|
|
|
|
|
+ }, {
|
|
|
|
|
+ sum: '0',
|
|
|
|
|
+ name: '科技贷',
|
|
|
|
|
+ img: sumUsingNumberTwo,
|
|
|
|
|
+ number: ''
|
|
|
|
|
+ }, {
|
|
|
|
|
+ sum: '0',
|
|
|
|
|
+ name: '惠园贷',
|
|
|
|
|
+ img: sumUsingNumberthree,
|
|
|
|
|
+ number: ''
|
|
|
|
|
+ }
|
|
|
];
|
|
];
|
|
|
|
|
+
|
|
|
/** 查询潇湘财银贷 */
|
|
/** 查询潇湘财银贷 */
|
|
|
function obtaingetXiaoxiangCaiyinLoan() {
|
|
function obtaingetXiaoxiangCaiyinLoan() {
|
|
|
- getXiaoxiangCaiyinLoan(queryParams.value).then((res) => {
|
|
|
|
|
- const state1Array = [];
|
|
|
|
|
- res.data.forEach(item => {
|
|
|
|
|
- state1Array.push(item.currentLoanBalance);
|
|
|
|
|
- })
|
|
|
|
|
- console.log("xxdd", res)
|
|
|
|
|
-
|
|
|
|
|
- // const sum = state1Array.reduce((accumulator, currentValue) => {
|
|
|
|
|
- // return accumulator + Number(currentValue);
|
|
|
|
|
- // }, 0);
|
|
|
|
|
- sumUsingNumber[0].sum = 7305;
|
|
|
|
|
- sumUsingNumber[0].number = state1Array.length;
|
|
|
|
|
|
|
+ getXiaoxiangCaiyinLoan(queryParams.value).then((res) => {
|
|
|
|
|
+ const state1Array = [];
|
|
|
|
|
+ res.data.forEach(item => {
|
|
|
|
|
+ state1Array.push(item.currentLoanBalance);
|
|
|
})
|
|
})
|
|
|
|
|
+ // console.log("xxdd", res)
|
|
|
|
|
+
|
|
|
|
|
+ // const sum = state1Array.reduce((accumulator, currentValue) => {
|
|
|
|
|
+ // return accumulator + Number(currentValue);
|
|
|
|
|
+ // }, 0);
|
|
|
|
|
+ sumUsingNumber[0].sum = 7305;
|
|
|
|
|
+ sumUsingNumber[0].number = state1Array.length;
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
/** 查询评科技贷: */
|
|
/** 查询评科技贷: */
|
|
|
function obtaingetTechnologyLoan() {
|
|
function obtaingetTechnologyLoan() {
|
|
|
- getTechnologyLoan(queryParams.value).then((res) => {
|
|
|
|
|
- const state1Array = [];
|
|
|
|
|
- res.forEach(item => {
|
|
|
|
|
- state1Array.push(item.loanAmount);
|
|
|
|
|
- })
|
|
|
|
|
- const sum = state1Array.reduce((accumulator, currentValue) => {
|
|
|
|
|
- return accumulator + Number(currentValue);
|
|
|
|
|
- }, 0);
|
|
|
|
|
- sumUsingNumber[1].sum = sum;
|
|
|
|
|
- sumUsingNumber[1].number = state1Array.length;
|
|
|
|
|
-
|
|
|
|
|
|
|
+ getTechnologyLoan(queryParams.value).then((res) => {
|
|
|
|
|
+ const state1Array = [];
|
|
|
|
|
+ res.forEach(item => {
|
|
|
|
|
+ state1Array.push(item.loanAmount);
|
|
|
})
|
|
})
|
|
|
|
|
+ const sum = state1Array.reduce((accumulator, currentValue) => {
|
|
|
|
|
+ return accumulator + Number(currentValue);
|
|
|
|
|
+ }, 0);
|
|
|
|
|
+ sumUsingNumber[1].sum = sum;
|
|
|
|
|
+ sumUsingNumber[1].number = state1Array.length;
|
|
|
|
|
+
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
/** 惠园贷: */
|
|
/** 惠园贷: */
|
|
|
function obtaingetHuiyuanLoan() {
|
|
function obtaingetHuiyuanLoan() {
|
|
|
- getHuiyuanLoan(queryParams.value).then((res) => {
|
|
|
|
|
- const state1Array = [];
|
|
|
|
|
- res.forEach(item => {
|
|
|
|
|
- state1Array.push(item.loanAmount);
|
|
|
|
|
- })
|
|
|
|
|
- const sum = state1Array.reduce((accumulator, currentValue) => {
|
|
|
|
|
- return accumulator + Number(currentValue);
|
|
|
|
|
- }, 0);
|
|
|
|
|
- sumUsingNumber[2].sum = sum;
|
|
|
|
|
- sumUsingNumber[2].number = state1Array.length;
|
|
|
|
|
-
|
|
|
|
|
|
|
+ getHuiyuanLoan(queryParams.value).then((res) => {
|
|
|
|
|
+ const state1Array = [];
|
|
|
|
|
+ res.forEach(item => {
|
|
|
|
|
+ state1Array.push(item.loanAmount);
|
|
|
})
|
|
})
|
|
|
|
|
+ const sum = state1Array.reduce((accumulator, currentValue) => {
|
|
|
|
|
+ return accumulator + Number(currentValue);
|
|
|
|
|
+ }, 0);
|
|
|
|
|
+ sumUsingNumber[2].sum = sum;
|
|
|
|
|
+ sumUsingNumber[2].number = state1Array.length;
|
|
|
|
|
+
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
const business = [{
|
|
const business = [{
|
|
|
- title: '园区纳税企业',
|
|
|
|
|
- value: 96,
|
|
|
|
|
- ratio: '80.67%',
|
|
|
|
|
- state: 1,
|
|
|
|
|
- img: parkOne
|
|
|
|
|
|
|
+ title: '园区纳税企业',
|
|
|
|
|
+ value: 96,
|
|
|
|
|
+ ratio: '80.67%',
|
|
|
|
|
+ state: 1,
|
|
|
|
|
+ img: parkOne
|
|
|
}, {
|
|
}, {
|
|
|
- title: '园区缴纳社保企业',
|
|
|
|
|
- value: '',
|
|
|
|
|
- ratio: '',
|
|
|
|
|
- state: 0,
|
|
|
|
|
- img: parktwo
|
|
|
|
|
|
|
+ title: '园区缴纳社保企业',
|
|
|
|
|
+ value: '',
|
|
|
|
|
+ ratio: '',
|
|
|
|
|
+ state: 0,
|
|
|
|
|
+ img: parktwo
|
|
|
}]
|
|
}]
|
|
|
|
|
+
|
|
|
/** 查询社保 */
|
|
/** 查询社保 */
|
|
|
function obtaingetSocialSecurity() {
|
|
function obtaingetSocialSecurity() {
|
|
|
- getSocialSecurity(queryParams.value).then((res) => {
|
|
|
|
|
- business[1].value = res.data.length;
|
|
|
|
|
- business[1].ratio = (res.data.length / 119 * 100).toFixed(2) + '%';
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ getSocialSecurity(queryParams.value).then((res) => {
|
|
|
|
|
+ res.data = res.data.filter(q=>q.remarks.includes(currentYear.value-1));
|
|
|
|
|
+ business[1].value = res.data.length;
|
|
|
|
|
+ business[1].ratio = (res.data.length / companyNumber.value * 100).toFixed(2) + '%';
|
|
|
|
|
+ })
|
|
|
|
|
+ getTaxes().then((res) => {
|
|
|
|
|
+ let result;
|
|
|
|
|
+ let a;
|
|
|
|
|
+ if(res){
|
|
|
|
|
+ a = res.filter(q=>{
|
|
|
|
|
+ return q.annualAmount == currentYear.value-1
|
|
|
|
|
+ })
|
|
|
|
|
+ if(a.length>0){
|
|
|
|
|
+ result = a.length/companyNumber.value*100;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ business[0].value = a.length
|
|
|
|
|
+ business[0].ratio = result.toFixed(2)+'%'
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-import parkOne from '@/assets/visualizationimg/parkOne.png';
|
|
|
|
|
-import parktwo from '@/assets/visualizationimg/parktwo.png';
|
|
|
|
|
-import parkthree from '@/assets/visualizationimg/parkthree.png';
|
|
|
|
|
-import parkfour from '@/assets/visualizationimg/parkfour.png';
|
|
|
|
|
-import parkfive from '@/assets/visualizationimg/parkfive.png';
|
|
|
|
|
-import parksix from '@/assets/visualizationimg/parksix.png';
|
|
|
|
|
|
|
|
|
|
const parkData = ref([{
|
|
const parkData = ref([{
|
|
|
- title: '占地面积',
|
|
|
|
|
- value: 14070 + '亩',
|
|
|
|
|
- img: parksix
|
|
|
|
|
-}, {
|
|
|
|
|
- title: '入驻企业',
|
|
|
|
|
- value: '',
|
|
|
|
|
- img: ''
|
|
|
|
|
|
|
+ title: "(平方公里)<br>占地面积",
|
|
|
|
|
+ value: '11.83',
|
|
|
|
|
+ img: parksix
|
|
|
}])
|
|
}])
|
|
|
|
|
+
|
|
|
/** 查询入驻企业、企业数量 */
|
|
/** 查询入驻企业、企业数量 */
|
|
|
-function obtaingetNumberOfEnterprises() {
|
|
|
|
|
- getNumberOfEnterprises(queryParams.value).then((res) => {
|
|
|
|
|
- // const ObjectValue = {
|
|
|
|
|
- // title: '入驻企业',
|
|
|
|
|
- // value: res.data.length,
|
|
|
|
|
- // img: parkOne
|
|
|
|
|
- // }
|
|
|
|
|
- parkData.value[1] = {
|
|
|
|
|
- title: '入驻企业',
|
|
|
|
|
- value: res.data.length,
|
|
|
|
|
- img: parkOne
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
|
|
+const obtaingetNumberOfEnterprises = async () => {
|
|
|
|
|
+ const res = await getNumberOfEnterprises(queryParams.value);
|
|
|
|
|
+ parkData.value.push({
|
|
|
|
|
+ title: '入驻企业',
|
|
|
|
|
+ // todo 暂时先写死
|
|
|
|
|
+ // value: res.data.length,
|
|
|
|
|
+ value: 121,
|
|
|
|
|
+ img: parkOne
|
|
|
|
|
+ })
|
|
|
|
|
+ // todo 暂时先写死
|
|
|
|
|
+ companyNumber.value = 121;
|
|
|
|
|
+ // companyNumber.value = res.data.length;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
/** 查询上市企业 */
|
|
/** 查询上市企业 */
|
|
|
function obtaingetListedCompanies() {
|
|
function obtaingetListedCompanies() {
|
|
|
- getListedCompanies(queryParams.value).then((res) => {
|
|
|
|
|
- const ObjectValue = {
|
|
|
|
|
- title: '上市企业',
|
|
|
|
|
- value: res.length,
|
|
|
|
|
- img: parktwo
|
|
|
|
|
- }
|
|
|
|
|
- parkData.value.push(ObjectValue)
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ getListedCompanies('规上').then((res) => {
|
|
|
|
|
+ res.data = [...new Set(res.data.map(item => item.enterpriseName))]
|
|
|
|
|
+ .map(name => res.data.find(item => item.enterpriseName === name))
|
|
|
|
|
+ const ObjectValue = {
|
|
|
|
|
+ title: '规上工业<br>企业数量',
|
|
|
|
|
+ value: res.data.length,
|
|
|
|
|
+ img: parktwo
|
|
|
|
|
+ }
|
|
|
|
|
+ parkData.value.push(ObjectValue)
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
/** 查询高新技术企业 */
|
|
/** 查询高新技术企业 */
|
|
|
function obtaingetHighTechEnterprises() {
|
|
function obtaingetHighTechEnterprises() {
|
|
|
- getHighTechEnterprises(queryParams.value).then((res) => {
|
|
|
|
|
- const ObjectValue = {
|
|
|
|
|
- title: '高新技术企业',
|
|
|
|
|
- value: res.data.length,
|
|
|
|
|
- img: parkthree
|
|
|
|
|
- }
|
|
|
|
|
- parkData.value.push(ObjectValue)
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ getHighTechEnterprises(queryParams.value).then((res) => {
|
|
|
|
|
+ const ObjectValue = {
|
|
|
|
|
+ title: '高新技术企业',
|
|
|
|
|
+ value: res.data.length,
|
|
|
|
|
+ img: parkthree
|
|
|
|
|
+ }
|
|
|
|
|
+ parkData.value.push(ObjectValue)
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
/** 查询科技中小型企业 */
|
|
/** 查询科技中小型企业 */
|
|
|
function obtaingetTechnologySmallAndmediumSizedEnterprises() {
|
|
function obtaingetTechnologySmallAndmediumSizedEnterprises() {
|
|
|
- getTechnologySmallAndmediumSizedEnterprises(queryParams.value).then((res) => {
|
|
|
|
|
- const ObjectValue = {
|
|
|
|
|
- title: '科技型中小企业',
|
|
|
|
|
- value: res.data.length,
|
|
|
|
|
- img: parkfour
|
|
|
|
|
- }
|
|
|
|
|
- parkData.value.push(ObjectValue)
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ getTechnologySmallAndmediumSizedEnterprises(queryParams.value).then((res) => {
|
|
|
|
|
+ const ObjectValue = {
|
|
|
|
|
+ title: '科技型中小企业',
|
|
|
|
|
+ value: res.data.length,
|
|
|
|
|
+ img: parkfour
|
|
|
|
|
+ }
|
|
|
|
|
+ parkData.value.push(ObjectValue)
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
/** 查询专利信息 */
|
|
/** 查询专利信息 */
|
|
|
function obtaingetPatentInformation() {
|
|
function obtaingetPatentInformation() {
|
|
|
- getPatentInformation(queryParams.value).then((res) => {
|
|
|
|
|
- const ObjectValue = {
|
|
|
|
|
- title: '园区企业专利数',
|
|
|
|
|
- value: res.data.length,
|
|
|
|
|
- img: parkfive
|
|
|
|
|
- }
|
|
|
|
|
- parkData.value.push(ObjectValue)
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ getPatentInformation(queryParams.value).then((res) => {
|
|
|
|
|
+ const ObjectValue = {
|
|
|
|
|
+ title: '园区企业专利数',
|
|
|
|
|
+ value: res.data.length,
|
|
|
|
|
+ img: parkfive
|
|
|
|
|
+ }
|
|
|
|
|
+ parkData.value.push(ObjectValue)
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const hyhgData = ref([])
|
|
const hyhgData = ref([])
|
|
|
|
|
+
|
|
|
/** 查询行业合规 */
|
|
/** 查询行业合规 */
|
|
|
function obtaingetAdministrativeSanction() {
|
|
function obtaingetAdministrativeSanction() {
|
|
|
- getAdministrativeSanction(queryParams.value).then((res) => {
|
|
|
|
|
- hyhgData.value = [{
|
|
|
|
|
- name: '企业数量',
|
|
|
|
|
- value: 119
|
|
|
|
|
- }, {
|
|
|
|
|
- name: '行政处罚',
|
|
|
|
|
- value: (res.data.length / 119).toFixed(2) * 100 + '%'
|
|
|
|
|
- }, {
|
|
|
|
|
- name: '被处罚企业数',
|
|
|
|
|
- value: res.data.length
|
|
|
|
|
- }, {
|
|
|
|
|
- name: '行政处罚条数',
|
|
|
|
|
- value: res.data.length
|
|
|
|
|
- }]
|
|
|
|
|
- // 企业数量 被处罚企业数 行政处罚条数
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ getAdministrativeSanction(queryParams.value).then((res) => {
|
|
|
|
|
+ hyhgData.value = [{
|
|
|
|
|
+ name: '企业数量',
|
|
|
|
|
+ value: companyNumber.value
|
|
|
|
|
+ }, {
|
|
|
|
|
+ name: '行政处罚',
|
|
|
|
|
+ value: ([...new Set(res.data)].length / companyNumber.value).toFixed(2) * 100 + '%'
|
|
|
|
|
+ }, {
|
|
|
|
|
+ name: '被处罚企业数',
|
|
|
|
|
+ value: [...new Set(res.data)].length
|
|
|
|
|
+ }, {
|
|
|
|
|
+ name: '行政处罚条数',
|
|
|
|
|
+ value: res.data.length
|
|
|
|
|
+ }]
|
|
|
|
|
+ // 企业数量 被处罚企业数 行政处罚条数
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
const xzqzzxData = ref([])
|
|
const xzqzzxData = ref([])
|
|
|
|
|
|
|
|
/** 查询行政强制执行 */
|
|
/** 查询行政强制执行 */
|
|
|
function obtaingetAdministrativeEnforcement() {
|
|
function obtaingetAdministrativeEnforcement() {
|
|
|
- getAdministrativeEnforcement(queryParams.value).then((res) => {
|
|
|
|
|
- xzqzzxData.value = [{
|
|
|
|
|
- name: '企业数量',
|
|
|
|
|
- value: 119
|
|
|
|
|
- }, {
|
|
|
|
|
- name: '行政强制执行',
|
|
|
|
|
- value: (res.data.length / 119).toFixed(2) * 100 + '%'
|
|
|
|
|
- }, {
|
|
|
|
|
- name: '被处罚企业数',
|
|
|
|
|
- value: res.data.length
|
|
|
|
|
- }, {
|
|
|
|
|
- name: '行政处罚条数',
|
|
|
|
|
- value: res.data.length
|
|
|
|
|
- }]
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ getAdministrativeEnforcement(queryParams.value).then((res) => {
|
|
|
|
|
+ xzqzzxData.value = [{
|
|
|
|
|
+ name: '企业数量',
|
|
|
|
|
+ value: companyNumber.value
|
|
|
|
|
+ }, {
|
|
|
|
|
+ name: '行政强制执行',
|
|
|
|
|
+ value: ([...new Set(res.data.map(item => item.unifiedSocialCreditCode))]
|
|
|
|
|
+ .map(code => res.data.find(item => item.unifiedSocialCreditCode === code)).length / companyNumber.value).toFixed(2) * 100 + '%'
|
|
|
|
|
+ }, {
|
|
|
|
|
+ name: '被执行企业数',
|
|
|
|
|
+ value: [...new Set(res.data.map(item => item.unifiedSocialCreditCode))]
|
|
|
|
|
+ .map(code => res.data.find(item => item.unifiedSocialCreditCode === code)).length
|
|
|
|
|
+ }, {
|
|
|
|
|
+ name: '行政执行条数',
|
|
|
|
|
+ value: res.data.length
|
|
|
|
|
+ }]
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-import gaojingkuang from '@/assets/visualizationimg/gaojingkuang.png';
|
|
|
|
|
-import zhuyikuang from '@/assets/visualizationimg/zhuyikuang.png';
|
|
|
|
|
-
|
|
|
|
|
|
|
|
|
|
const ssyjList = ref([])
|
|
const ssyjList = ref([])
|
|
|
|
|
+
|
|
|
/** 查询经营异常 */
|
|
/** 查询经营异常 */
|
|
|
function obtaingetBusinessAdnormalities() {
|
|
function obtaingetBusinessAdnormalities() {
|
|
|
- getBusinessAdnormalities(queryParams.value).then((res) => {
|
|
|
|
|
- console.log("查询经营异常:", res)
|
|
|
|
|
- res.forEach(item => {
|
|
|
|
|
- const ObjectValue = {
|
|
|
|
|
- name: item.enterpriseName,
|
|
|
|
|
- time: '经营异常',
|
|
|
|
|
- state: 0,
|
|
|
|
|
- img: gaojingkuang
|
|
|
|
|
- }
|
|
|
|
|
- ssyjList.value.push(ObjectValue)
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ getBusinessAdnormalities(queryParams.value).then((res) => {
|
|
|
|
|
+ // console.log("查询经营异常:", res)
|
|
|
|
|
+ res.forEach(item => {
|
|
|
|
|
+ const ObjectValue = {
|
|
|
|
|
+ name: item.enterpriseName,
|
|
|
|
|
+ time: '经营异常',
|
|
|
|
|
+ state: 0,
|
|
|
|
|
+ img: gaojingkuang
|
|
|
|
|
+ }
|
|
|
|
|
+ ssyjList.value.push(ObjectValue)
|
|
|
})
|
|
})
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
/** 查询失信被执行人 */
|
|
/** 查询失信被执行人 */
|
|
|
function obtaingetDishonestDebtor() {
|
|
function obtaingetDishonestDebtor() {
|
|
|
- getDishonestDebtor(queryParams.value).then((res) => {
|
|
|
|
|
- console.log("查询失信被执行人:", res)
|
|
|
|
|
- res.forEach(item => {
|
|
|
|
|
- const ObjectValue = {
|
|
|
|
|
- name: item.enterpriseName,
|
|
|
|
|
- time: '失信被执行人',
|
|
|
|
|
- state: 1,
|
|
|
|
|
- img: zhuyikuang
|
|
|
|
|
- }
|
|
|
|
|
- ssyjList.value.push(ObjectValue)
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ getDishonestDebtor(queryParams.value).then((res) => {
|
|
|
|
|
+ // console.log("查询失信被执行人:", res)
|
|
|
|
|
+ res.forEach(item => {
|
|
|
|
|
+ const ObjectValue = {
|
|
|
|
|
+ name: item.enterpriseName,
|
|
|
|
|
+ time: '失信被执行人',
|
|
|
|
|
+ state: 1,
|
|
|
|
|
+ img: zhuyikuang
|
|
|
|
|
+ }
|
|
|
|
|
+ ssyjList.value.push(ObjectValue)
|
|
|
})
|
|
})
|
|
|
|
|
+ })
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-obtainCreditScoreList();
|
|
|
|
|
-obtaingetTrossDomesticProduct();
|
|
|
|
|
-obtaingetTopTenTaxation();
|
|
|
|
|
-// obtaingetXiaoxiangCaiyinLoan();
|
|
|
|
|
-// obtaingetTechnologyLoan();
|
|
|
|
|
-// obtaingetHuiyuanLoan();
|
|
|
|
|
-// obtaingetNumberOfEnterprises();
|
|
|
|
|
-// obtaingetListedCompanies();
|
|
|
|
|
-// obtaingetHighTechEnterprises();
|
|
|
|
|
-// obtaingetTechnologySmallAndmediumSizedEnterprises();
|
|
|
|
|
-// obtaingetPatentInformation();
|
|
|
|
|
-// obtaingetAdministrativeSanction();
|
|
|
|
|
-// obtaingetAdministrativeEnforcement();
|
|
|
|
|
-// obtaingetBusinessAdnormalities();
|
|
|
|
|
-// obtaingetDishonestDebtor();
|
|
|
|
|
-// obtaingetSocialSecurity();
|
|
|
|
|
|
|
+const init = async () => {
|
|
|
|
|
+ await obtaingetNumberOfEnterprises();
|
|
|
|
|
+ obtainCreditScoreList();
|
|
|
|
|
+ obtaingetTrossDomesticProduct();
|
|
|
|
|
+ obtaingetTopTenTaxation();
|
|
|
|
|
+ obtaingetXiaoxiangCaiyinLoan();
|
|
|
|
|
+ obtaingetTechnologyLoan();
|
|
|
|
|
+ obtaingetHuiyuanLoan();
|
|
|
|
|
+ obtaingetListedCompanies();
|
|
|
|
|
+ obtaingetHighTechEnterprises();
|
|
|
|
|
+ obtaingetTechnologySmallAndmediumSizedEnterprises();
|
|
|
|
|
+ obtaingetPatentInformation();
|
|
|
|
|
+ obtaingetAdministrativeSanction();
|
|
|
|
|
+ obtaingetAdministrativeEnforcement();
|
|
|
|
|
+ obtaingetBusinessAdnormalities();
|
|
|
|
|
+ obtaingetDishonestDebtor();
|
|
|
|
|
+ obtaingetSocialSecurity();
|
|
|
|
|
+}
|
|
|
|
|
+init();
|
|
|
|
|
|
|
|
|
|
|
|
|
// 如果需要的话,在beforeUnmount中清理资源
|
|
// 如果需要的话,在beforeUnmount中清理资源
|
|
|
-import { onBeforeUnmount } from 'vue';
|
|
|
|
|
|
|
+
|
|
|
onBeforeUnmount(() => {
|
|
onBeforeUnmount(() => {
|
|
|
- if (map) {
|
|
|
|
|
- // 清理地图资源
|
|
|
|
|
- map.dispose();
|
|
|
|
|
- map = null;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ if (map) {
|
|
|
|
|
+ // 清理地图资源
|
|
|
|
|
+ map.dispose();
|
|
|
|
|
+ map = null;
|
|
|
|
|
+ }
|
|
|
});
|
|
});
|
|
|
</script>
|
|
</script>
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
.Vbox {
|
|
.Vbox {
|
|
|
- height: 100vh;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
|
|
+ height: 100vh;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+
|
|
|
|
|
+ .head {
|
|
|
|
|
+ height: 120px;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ z-index: 999;
|
|
|
|
|
+ // background-color: rgba($color: #0e2a41, $alpha: .5);
|
|
|
|
|
+
|
|
|
|
|
+ .VisTitle {
|
|
|
|
|
+ height: 60px;
|
|
|
|
|
+ background-image: url("../../assets/visualizationimg/title.png");
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- .head {
|
|
|
|
|
- height: 120px;
|
|
|
|
|
- top: 0;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- z-index: 999;
|
|
|
|
|
- // background-color: rgba($color: #0e2a41, $alpha: .5);
|
|
|
|
|
|
|
+ .Vgradation {
|
|
|
|
|
+ height: 60px;
|
|
|
|
|
+ width: 40vw;
|
|
|
|
|
+ margin-left: 30vw;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ //justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+
|
|
|
|
|
+ .tab {
|
|
|
|
|
+ width: 100px;
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ margin: 0 10px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ line-height: 40px;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ font-size: 0.9vw;
|
|
|
|
|
+ background-image: url("../../assets/visualizationimg/headg.png");
|
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .active {
|
|
|
|
|
+ background-image: url("../../assets/visualizationimg/headgactive.png");
|
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .container {
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+
|
|
|
|
|
+ .left {
|
|
|
|
|
+ left: 20px;
|
|
|
|
|
+ float: left;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ margin-left: -100%;
|
|
|
|
|
+ width: 26vw;
|
|
|
|
|
+ // background-color: rgba($color: #000000, $alpha: 0.2);
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ top: 60px;
|
|
|
|
|
+ z-index: 999;
|
|
|
|
|
+
|
|
|
|
|
+ .rightParkBox {
|
|
|
|
|
+ height: 30%;
|
|
|
|
|
+ background-color: rgba($color: #000000, $alpha: .6);
|
|
|
|
|
+ margin-bottom: 14px;
|
|
|
|
|
+
|
|
|
|
|
+ .leftOBTitle,
|
|
|
|
|
+ .rightParkTtile,
|
|
|
|
|
+ .RICBTitle {
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ line-height: 40px;
|
|
|
|
|
+ padding-left: 60px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ background-image: url("../../assets/visualizationimg/centertitle.png");
|
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .leftOBContent {
|
|
|
|
|
+ height: calc(100% - 40px);
|
|
|
|
|
+
|
|
|
|
|
+ .HTB_CB_List {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
|
|
|
- .VisTitle {
|
|
|
|
|
- height: 60px;
|
|
|
|
|
- background-image: url("../../assets/visualizationimg/title.png");
|
|
|
|
|
|
|
+ .HTBCBL_table {
|
|
|
|
|
+ margin-top: 5px;
|
|
|
|
|
+ // border-radius: 10px;
|
|
|
|
|
+ height: 34px;
|
|
|
|
|
+ padding: 0 10px;
|
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+
|
|
|
|
|
+ .HTBTCL_data {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin-top: 5px;
|
|
|
|
|
+
|
|
|
|
|
+ img {
|
|
|
|
|
+ width: 16px;
|
|
|
|
|
+ height: 14px;
|
|
|
|
|
+ margin-right: 5px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .HTBTCLD_text {
|
|
|
|
|
+ font-size: 19px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .HTBTCL_time {
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ margin-top: 2px;
|
|
|
|
|
+
|
|
|
|
|
+ img {
|
|
|
|
|
+ width: 100px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ div {
|
|
|
|
|
+ color: #ddd;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .Vgradation {
|
|
|
|
|
- height: 60px;
|
|
|
|
|
|
|
+ .rightParkContent {
|
|
|
|
|
+ height: calc(100% - 40px);
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: repeat(3, 33.33%);
|
|
|
|
|
+ grid-template-rows: repeat(2, 50%);
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+
|
|
|
|
|
+ .RPCBox {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 70%;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
+ // justify-content: center;
|
|
|
|
|
|
|
|
- .tab {
|
|
|
|
|
- width: 100px;
|
|
|
|
|
- height: 40px;
|
|
|
|
|
- margin: 0 10px;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- line-height: 40px;
|
|
|
|
|
- color: white;
|
|
|
|
|
|
|
+ .RPCBImg {
|
|
|
|
|
+ width: 60px;
|
|
|
|
|
+ height: 60px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .RPCBData {
|
|
|
|
|
+ margin-left: 10px;
|
|
|
|
|
+
|
|
|
|
|
+ .RPCBDNumber {
|
|
|
|
|
+ font-weight: normal;
|
|
|
|
|
+ font-size: 1.2vw;
|
|
|
|
|
+ color: #21F2FF;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .RPCBDName {
|
|
|
font-weight: 500;
|
|
font-weight: 500;
|
|
|
- background-image: url("../../assets/visualizationimg/headg.png");
|
|
|
|
|
- background-size: 100% 100%;
|
|
|
|
|
|
|
+ font-size: 0.7vw;
|
|
|
|
|
+ color: #C9E2FF;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- .active {
|
|
|
|
|
- background-image: url("../../assets/visualizationimg/headgactive.png");
|
|
|
|
|
- background-size: 100% 100%;
|
|
|
|
|
|
|
+ .RICBTContent {
|
|
|
|
|
+ height: calc(100% - 40px);
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: repeat(1, 100%);
|
|
|
|
|
+ grid-template-rows: repeat(2, 50%);
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+
|
|
|
|
|
+ .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;
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ .leftTwoBox {
|
|
|
|
|
+ height: 30%;
|
|
|
|
|
+ background-color: rgba($color: #000000, $alpha: .6);
|
|
|
|
|
+ margin-bottom: 14px;
|
|
|
|
|
+
|
|
|
|
|
+ .leftOBTitle,
|
|
|
|
|
+ .leftGDPTitle,
|
|
|
|
|
+ .leftTaxationTitle {
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ line-height: 40px;
|
|
|
|
|
+ padding-left: 60px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ background-image: url("../../assets/visualizationimg/centertitle.png");
|
|
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ .leftOBContent,
|
|
|
|
|
+ .leftGDPContent,
|
|
|
|
|
+ .leftTaxationContent {
|
|
|
|
|
+ height: calc(100% - 40px);
|
|
|
|
|
+
|
|
|
|
|
+ .LTCKing {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ // justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ background-image: url("../../assets/visualizationimg/rankingbu.png");
|
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
+ padding: 10px 10px;
|
|
|
|
|
+
|
|
|
|
|
+ .ranking {
|
|
|
|
|
+ width: 25px;
|
|
|
|
|
+ height: 25px;
|
|
|
|
|
+ margin-right: 10px;
|
|
|
|
|
+
|
|
|
|
|
+ img {
|
|
|
|
|
+ width: 25px;
|
|
|
|
|
+ height: 25px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .companyName {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ font-size: 1vw;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .companyValue {
|
|
|
|
|
+ color: #DFD92C;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .leftOneBox,
|
|
|
|
|
+ .leftThreeBox {
|
|
|
|
|
+ height: 30%;
|
|
|
|
|
+ background-color: rgba($color: #000000, $alpha: .6);
|
|
|
|
|
+ margin-bottom: 14px;
|
|
|
|
|
+
|
|
|
|
|
+ .leftOBTitle,
|
|
|
|
|
+ .leftGDPTitle,
|
|
|
|
|
+ .leftTaxationTitle {
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ line-height: 40px;
|
|
|
|
|
+ padding-left: 60px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ background-image: url("../../assets/visualizationimg/centertitle.png");
|
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .leftOBContent,
|
|
|
|
|
+ .leftGDPContent,
|
|
|
|
|
+ .leftTaxationContent {
|
|
|
|
|
+ height: calc(100% - 40px);
|
|
|
|
|
+
|
|
|
|
|
+ .LTCKing {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ // justify-content: space-between;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ background-image: url("../../assets/visualizationimg/rankingbu.png");
|
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
+ padding: 10px 10px;
|
|
|
|
|
+
|
|
|
|
|
+ .ranking {
|
|
|
|
|
+ width: 25px;
|
|
|
|
|
+ height: 25px;
|
|
|
|
|
+ margin-right: 10px;
|
|
|
|
|
+
|
|
|
|
|
+ img {
|
|
|
|
|
+ width: 25px;
|
|
|
|
|
+ height: 25px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .companyName {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ font-size: 1vw;
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .companyValue {
|
|
|
|
|
+ color: #DFD92C;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .container {
|
|
|
|
|
|
|
+ .boxBottom {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ z-index: 999;
|
|
|
|
|
+ height: 150px;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ width: 45vw;
|
|
|
|
|
+ left: 27.5vw;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+
|
|
|
|
|
+ .parkLoan {
|
|
|
|
|
+ width: 50%;
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
- position: relative;
|
|
|
|
|
-
|
|
|
|
|
- .left {
|
|
|
|
|
- left: 20px;
|
|
|
|
|
- float: left;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- margin-left: -100%;
|
|
|
|
|
- width: 500px;
|
|
|
|
|
- // background-color: rgba($color: #000000, $alpha: 0.2);
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- top: 60px;
|
|
|
|
|
- z-index: 999;
|
|
|
|
|
-
|
|
|
|
|
- .leftOneBox,
|
|
|
|
|
- .leftTwoBox,
|
|
|
|
|
- .leftThreeBox {
|
|
|
|
|
- height: 30%;
|
|
|
|
|
- background-color: rgba($color: #000000, $alpha: .6);
|
|
|
|
|
- margin-bottom: 14px;
|
|
|
|
|
-
|
|
|
|
|
- .leftOBTitle,
|
|
|
|
|
- .leftGDPTitle,
|
|
|
|
|
- .leftTaxationTitle {
|
|
|
|
|
- height: 40px;
|
|
|
|
|
- color: white;
|
|
|
|
|
- line-height: 40px;
|
|
|
|
|
- padding-left: 60px;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- background-image: url("../../assets/visualizationimg/centertitle.png");
|
|
|
|
|
- background-size: 100% 100%;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ background-color: rgba($color: #000000, $alpha: .6);
|
|
|
|
|
+
|
|
|
|
|
+ .PCFLTitle {
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ line-height: 40px;
|
|
|
|
|
+ padding-left: 60px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ background-image: url("../../assets/visualizationimg/centertitle.png");
|
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- .leftOBContent,
|
|
|
|
|
- .leftGDPContent,
|
|
|
|
|
- .leftTaxationContent {
|
|
|
|
|
- height: calc(100% - 40px);
|
|
|
|
|
-
|
|
|
|
|
- .LTCKing {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- color: white;
|
|
|
|
|
- // justify-content: space-between;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- background-image: url("../../assets/visualizationimg/rankingbu.png");
|
|
|
|
|
- background-size: 100% 100%;
|
|
|
|
|
- padding: 10px 10px;
|
|
|
|
|
-
|
|
|
|
|
- .ranking {
|
|
|
|
|
- width: 25px;
|
|
|
|
|
- height: 25px;
|
|
|
|
|
- margin-right: 10px;
|
|
|
|
|
-
|
|
|
|
|
- img {
|
|
|
|
|
- width: 25px;
|
|
|
|
|
- height: 25px;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .companyName {
|
|
|
|
|
- flex: 1;
|
|
|
|
|
- font-size: 16px;
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .companyValue {
|
|
|
|
|
- color: #DFD92C;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .PCFLContent {
|
|
|
|
|
+ height: calc(100% - 40px);
|
|
|
|
|
+
|
|
|
|
|
+ .PCFLNumber {
|
|
|
|
|
+ height: 50%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: space-around;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin: 0 10px;
|
|
|
|
|
+
|
|
|
|
|
+ .RPCBData {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+
|
|
|
|
|
+ .RPCBDNumber {
|
|
|
|
|
+ font-weight: normal;
|
|
|
|
|
+ font-size: 1.1vw;
|
|
|
|
|
+ color: #21F2FF;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .RPCBDName {
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ color: #C9E2FF;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .PCFLImg {
|
|
|
|
|
+ margin-top: -50px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .boxBttTwo {
|
|
|
|
|
+ width: 50%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ margin-left: 10px;
|
|
|
|
|
+ background-color: rgba($color: #000000, $alpha: .6);
|
|
|
|
|
+
|
|
|
|
|
+ .businessManagTitle {
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ line-height: 40px;
|
|
|
|
|
+ padding-left: 60px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ background-image: url("../../assets/visualizationimg/centertitle.png");
|
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .businessManagContent {
|
|
|
|
|
+ height: calc(100% - 40px);
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
|
|
|
- .boxBottom {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- z-index: 999;
|
|
|
|
|
- height: 150px;
|
|
|
|
|
- bottom: 0;
|
|
|
|
|
- width: 860px;
|
|
|
|
|
- left: 530px;
|
|
|
|
|
|
|
+ .RPCBox {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 70%;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+
|
|
|
|
|
+ .RPCBImg {
|
|
|
|
|
+ width: 60px;
|
|
|
|
|
+ height: 60px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .RPCBData {
|
|
|
|
|
+ margin-left: 10px;
|
|
|
|
|
+
|
|
|
|
|
+ .RPCBDNumber {
|
|
|
|
|
+ font-weight: normal;
|
|
|
|
|
+ font-size: 1vw;
|
|
|
|
|
+ color: #21F2FF;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .RPCBDName {
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ font-size: 0.8vw;
|
|
|
|
|
+ color: #C9E2FF;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- .parkLoan {
|
|
|
|
|
- width: 50%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- background-color: rgba($color: #000000, $alpha: .6);
|
|
|
|
|
-
|
|
|
|
|
- .PCFLTitle {
|
|
|
|
|
- height: 40px;
|
|
|
|
|
- color: white;
|
|
|
|
|
- line-height: 40px;
|
|
|
|
|
- padding-left: 60px;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- background-image: url("../../assets/visualizationimg/centertitle.png");
|
|
|
|
|
- background-size: 100% 100%;
|
|
|
|
|
|
|
+ .RPCBDRatio {
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ font-size: 0.8vw;
|
|
|
|
|
+ color: #C9E2FF;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .center {
|
|
|
|
|
+ float: left;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ background-color: green;
|
|
|
|
|
+
|
|
|
|
|
+ .allmap {
|
|
|
|
|
+ /* // 注意给dom宽高,不然地图不出来 */
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ margin: auto;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .right {
|
|
|
|
|
+ //right: 20px;
|
|
|
|
|
+ left: 73vw;
|
|
|
|
|
+ float: left;
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ //margin-left: -500px;
|
|
|
|
|
+ width: 26.5vw;
|
|
|
|
|
+ // background-color: rgba($color: #000000, $alpha: 0.2);
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ top: 60px;
|
|
|
|
|
+ z-index: 999;
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ .leftOneBox,
|
|
|
|
|
+ .rightParkBox,
|
|
|
|
|
+ .rightIndustryComplianceBox {
|
|
|
|
|
+ height: 30%;
|
|
|
|
|
+ background-color: rgba($color: #000000, $alpha: .6);
|
|
|
|
|
+ margin-bottom: 14px;
|
|
|
|
|
+
|
|
|
|
|
+ .leftOBTitle,
|
|
|
|
|
+ .rightParkTtile,
|
|
|
|
|
+ .RICBTitle {
|
|
|
|
|
+ height: 40px;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ line-height: 40px;
|
|
|
|
|
+ padding-left: 60px;
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ background-image: url("../../assets/visualizationimg/centertitle.png");
|
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .leftOBContent {
|
|
|
|
|
+ height: calc(100% - 40px);
|
|
|
|
|
+
|
|
|
|
|
+ .HTB_CB_List {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+
|
|
|
|
|
+ .HTBCBL_table {
|
|
|
|
|
+ margin-top: 5px;
|
|
|
|
|
+ // border-radius: 10px;
|
|
|
|
|
+ height: 34px;
|
|
|
|
|
+ padding: 0 10px;
|
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+
|
|
|
|
|
+ .HTBTCL_data {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin-top: 5px;
|
|
|
|
|
+
|
|
|
|
|
+ img {
|
|
|
|
|
+ width: 16px;
|
|
|
|
|
+ height: 14px;
|
|
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .PCFLContent {
|
|
|
|
|
- height: calc(100% - 40px);
|
|
|
|
|
-
|
|
|
|
|
- .PCFLNumber {
|
|
|
|
|
- height: 50%;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: space-around;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- margin: 0 10px;
|
|
|
|
|
-
|
|
|
|
|
- .RPCBData {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
-
|
|
|
|
|
- .RPCBDNumber {
|
|
|
|
|
- font-weight: normal;
|
|
|
|
|
- font-size: 24px;
|
|
|
|
|
- color: #21F2FF;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .RPCBDName {
|
|
|
|
|
- font-weight: 500;
|
|
|
|
|
- font-size: 14px;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- color: #C9E2FF;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .PCFLImg {
|
|
|
|
|
- margin-top: -50px;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .HTBTCLD_text {
|
|
|
|
|
+ font-size: 1.05vw;
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .HTBTCL_time {
|
|
|
|
|
+ font-size: 15px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ margin-top: 2px;
|
|
|
|
|
|
|
|
- .boxBttTwo {
|
|
|
|
|
- width: 50%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- margin-left: 10px;
|
|
|
|
|
- background-color: rgba($color: #000000, $alpha: .6);
|
|
|
|
|
-
|
|
|
|
|
- .businessManagTitle {
|
|
|
|
|
- height: 40px;
|
|
|
|
|
- color: white;
|
|
|
|
|
- line-height: 40px;
|
|
|
|
|
- padding-left: 60px;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- background-image: url("../../assets/visualizationimg/centertitle.png");
|
|
|
|
|
- background-size: 100% 100%;
|
|
|
|
|
|
|
+ img {
|
|
|
|
|
+ width: 100px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .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;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ div {
|
|
|
|
|
+ color: #ddd;
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .center {
|
|
|
|
|
- float: left;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
|
|
+ .rightParkContent {
|
|
|
|
|
+ height: calc(100% - 40px);
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: repeat(3, 33.33%);
|
|
|
|
|
+ grid-template-rows: repeat(2, 50%);
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+
|
|
|
|
|
+ .RPCBox {
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
- background-color: green;
|
|
|
|
|
-
|
|
|
|
|
- .allmap {
|
|
|
|
|
- /* // 注意给dom宽高,不然地图不出来 */
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- margin: auto;
|
|
|
|
|
- padding: 0;
|
|
|
|
|
|
|
+ height: 70%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ // justify-content: center;
|
|
|
|
|
+
|
|
|
|
|
+ .RPCBImg {
|
|
|
|
|
+ width: 60px;
|
|
|
|
|
+ height: 60px;
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
- .right {
|
|
|
|
|
- right: 20px;
|
|
|
|
|
- float: left;
|
|
|
|
|
- position: relative;
|
|
|
|
|
- margin-left: -500px;
|
|
|
|
|
- width: 500px;
|
|
|
|
|
- // background-color: rgba($color: #000000, $alpha: 0.2);
|
|
|
|
|
- height: 100%;
|
|
|
|
|
- top: 60px;
|
|
|
|
|
- z-index: 999;
|
|
|
|
|
-
|
|
|
|
|
- .leftOneBox,
|
|
|
|
|
- .rightParkBox,
|
|
|
|
|
- .rightIndustryComplianceBox {
|
|
|
|
|
- height: 30%;
|
|
|
|
|
- background-color: rgba($color: #000000, $alpha: .6);
|
|
|
|
|
- margin-bottom: 14px;
|
|
|
|
|
-
|
|
|
|
|
- .leftOBTitle,
|
|
|
|
|
- .rightParkTtile,
|
|
|
|
|
- .RICBTitle {
|
|
|
|
|
- height: 40px;
|
|
|
|
|
- color: white;
|
|
|
|
|
- line-height: 40px;
|
|
|
|
|
- padding-left: 60px;
|
|
|
|
|
- font-weight: bold;
|
|
|
|
|
- background-image: url("../../assets/visualizationimg/centertitle.png");
|
|
|
|
|
- background-size: 100% 100%;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .RPCBData {
|
|
|
|
|
+ margin-left: 10px;
|
|
|
|
|
|
|
|
- .leftOBContent {
|
|
|
|
|
- height: calc(100% - 40px);
|
|
|
|
|
-
|
|
|
|
|
- .HTB_CB_List {
|
|
|
|
|
- width: 100%;
|
|
|
|
|
-
|
|
|
|
|
- .HTBCBL_table {
|
|
|
|
|
- margin-top: 5px;
|
|
|
|
|
- // border-radius: 10px;
|
|
|
|
|
- height: 34px;
|
|
|
|
|
- padding: 0 10px;
|
|
|
|
|
- background-size: 100% 100%;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: space-between;
|
|
|
|
|
-
|
|
|
|
|
- .HTBTCL_data {
|
|
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- margin-top: 5px;
|
|
|
|
|
-
|
|
|
|
|
- img {
|
|
|
|
|
- width: 16px;
|
|
|
|
|
- height: 14px;
|
|
|
|
|
- margin-right: 5px;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .HTBTCLD_text {
|
|
|
|
|
- font-size: 19px;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .HTBTCL_time {
|
|
|
|
|
- font-size: 15px;
|
|
|
|
|
- display: flex;
|
|
|
|
|
- margin-top: 2px;
|
|
|
|
|
-
|
|
|
|
|
- img {
|
|
|
|
|
- width: 100px;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- div {
|
|
|
|
|
- color: #ddd;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .RPCBDNumber {
|
|
|
|
|
+ font-weight: normal;
|
|
|
|
|
+ font-size: 1vw;
|
|
|
|
|
+ color: #21F2FF;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .RPCBDName {
|
|
|
|
|
+ font-weight: 500;
|
|
|
|
|
+ font-size: 0.8vw;
|
|
|
|
|
+ color: #C9E2FF;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- .rightParkContent {
|
|
|
|
|
- height: calc(100% - 40px);
|
|
|
|
|
- display: grid;
|
|
|
|
|
- grid-template-columns: repeat(3, 33.33%);
|
|
|
|
|
- grid-template-rows: repeat(2, 50%);
|
|
|
|
|
- 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;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .RICBTContent {
|
|
|
|
|
+ height: calc(100% - 40px);
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: repeat(1, 100%);
|
|
|
|
|
+ grid-template-rows: repeat(2, 50%);
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
|
|
|
- .RICBTContent {
|
|
|
|
|
- height: calc(100% - 40px);
|
|
|
|
|
- display: grid;
|
|
|
|
|
- grid-template-columns: repeat(1, 100%);
|
|
|
|
|
- grid-template-rows: repeat(2, 50%);
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
-
|
|
|
|
|
- .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;
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .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: 1.6vw;
|
|
|
|
|
+ color: #3BA9FF;
|
|
|
|
|
+ line-height: 25px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .administrativeS {
|
|
|
|
|
+ font-weight: normal;
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ color: #F8FEFF;
|
|
|
|
|
+ line-height: 25px;
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|