Huaihua-High-tech-Zone/src/views/visualization/index.vue

<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>
      </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 class="companyName">{{ item.name }}</div>
                <div class="companyValue">{{ item.value }}万元</div>
              </div>
            </div>
          </el-scrollbar>
        </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 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>
        <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 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">
                <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">
                <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 class="HTBTCL_time">
                    <div>
                      {{ itemss.time }}
                    </div>
                  </div>
                </div>
              </div>
              <!-- <baseEcharts></baseEcharts> -->
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
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 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 {
  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);
let map = null;
let marker = null
const companyNumber = ref();

const data = reactive({
  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()-1;
  if(a == 0){
    a = 4
  }
  return a;
})
const specialQuarter2 = computed(() => {
  let a = getCurrentQuarter()-2;
  if(a == 0){
    a = 4
  }else if(a == -1){
    a = 3
  }
  return a;
})
const RanKingData = ref([]);
const rankImgIconArr = [one, two, three, four, five, six, seven, eight, nine, ten];
const getTaxTop10 = async () => {
  let res = await getLastQuarterYoY2(specialQuarter.value);
  console.log(res,7777);
  if (res.code == 200) {
    if(res.data[0].lastQuarterCurrentTotal == 0){
      res = await getLastQuarterYoY2(specialQuarter2.value);
    }
    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 gradationMun = [{
  name: "3A级企业",
  state: 3,
  type: 'AAA'
}, {
  name: "2A级企业",
  state: 2,
  type: 'AA'
}, {
  name: "1A级企业",
  state: 1,
  type: 'A'
}, {
  name: "B级企业",
  state: 4,
  type: 'B'
}, {
  name: "C级企业",
  state: 5,
  type: 'C'
}, {
  name: "D级企业",
  state: 6,
  type: 'D'
}, {
  name: "全部企业",
  state: 0,
  type: ''
}]
const activeTab = ref(6); // 默认激活第一个tab  
// const resultArray = ref;

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);
  }
});

// );
/** 查询用户列表 */
function getClassificationList() {
  getLngLatValueData(queryParams.value).then((res) => {
    const LNgLatData = res.data;
    // console.log("外层", res.data)
    getclassData(LNgLatData)
  })
}

function getclassData(lngLat) {

  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 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) => {
  //获取地图上所有的覆盖物
  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;
};
getClassificationList()


/** 查询评价分析 */
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'},
      ]
    });
  })
}

/** 查询产值 */
const NamechartData = ref([]);
const ArrOneData = ref([]);
const ArrTwoData = ref([]);
const currentDate = ref(new Date());//获取季度值

//当前季度
const currentQuarter = computed(() => {
  const month = currentDate.value.getMonth();
  return Math.floor(month / 3) + 1;
});
//上一个季度
const previousQuarter = computed(() => {
  return currentQuarter.value <= 1 ? 4 : currentQuarter.value - 1;
});
//当前年份
const currentYear = computed(() => currentDate.value.getFullYear());
// 上一年
const lastYear = computed(() => currentDate.value.getFullYear() - 1);
const quarterToAmountMap = {
  '1': 'firstQuarterAmount',
  '2': 'secondQuarterAmount',
  '3': 'thirdQuarterAmount',
  '4': 'fourthQuarterAmount'
};

function obtaingetTrossDomesticProduct() {
  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)
  })
}


const RanKingDatas = ref([])

/** 查询纳税Top10 */
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)

    } else {
      // console.error(`Invalid quarter: ${previousQuarter.value}`);
    }
  })
}


const sumUsingNumber = [
  {
    sum: '0',
    name: '潇湘财银贷',
    img: sumUsingNumberOne,
    number: ''
  }, {
    sum: '0',
    name: '科技贷',
    img: sumUsingNumberTwo,
    number: ''
  }, {
    sum: '0',
    name: '惠园贷',
    img: sumUsingNumberthree,
    number: ''
  }
];

/** 查询潇湘财银贷 */
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;
  })
}

/** 查询评科技贷： */
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;

  })
}

/** 惠园贷： */
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;

  })
}


const business = [{
  title: '园区纳税企业',
  value: 96,
  ratio: '80.67%',
  state: 1,
  img: parkOne
}, {
  title: '园区缴纳社保企业',
  value: '',
  ratio: '',
  state: 0,
  img: parktwo
}]

/** 查询社保 */
function obtaingetSocialSecurity() {
  getSocialSecurity(queryParams.value).then((res) => {
    res.data = res.data.filter(q=>q.remarks.includes(currentYear.value));
    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)+'%'
  })
}


const parkData = ref([{
  title: "(平方公里)<br>占地面积",
  value: '11.83',
  img: parksix
}])

/** 查询入驻企业、企业数量 */
const obtaingetNumberOfEnterprises = async () => {
  const res = await getNumberOfEnterprises(queryParams.value);
  parkData.value.push({
    title: '入驻企业',
    value: res.data.length,
    // value: 121,
    img: parkOne
  })
  // companyNumber.value = 121;
  companyNumber.value = res.data.length;
}

/** 查询上市企业 */
function obtaingetListedCompanies() {
  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() {
  getHighTechEnterprises(queryParams.value).then((res) => {
    const ObjectValue = {
      title: '高新技术企业',
      value: res.data.length,
      img: parkthree
    }
    parkData.value.push(ObjectValue)
  })
}

/** 查询科技中小型企业 */
function obtaingetTechnologySmallAndmediumSizedEnterprises() {
  getTechnologySmallAndmediumSizedEnterprises(queryParams.value).then((res) => {
    const ObjectValue = {
      title: '科技型中小企业',
      value: res.data.length,
      img: parkfour
    }
    parkData.value.push(ObjectValue)
  })
}

/** 查询专利信息 */
function obtaingetPatentInformation() {
  getPatentInformation(queryParams.value).then((res) => {
    const ObjectValue = {
      title: '园区企业专利数',
      value: res.data.length,
      img: parkfive
    }
    parkData.value.push(ObjectValue)
  })
}

const hyhgData = ref([])

/** 查询行业合规 */
function obtaingetAdministrativeSanction() {
  getAdministrativeSanction(queryParams.value).then((res) => {
    hyhgData.value = [{
      name: '企业数量',
      value: companyNumber.value
    }, {
      name: '行政处罚',
      value: (([...new Set(res.data)].length / companyNumber.value) * 100).toFixed(2) + '%'
    }, {
      name: '被处罚企业数',
      value: [...new Set(res.data)].length
    }, {
      name: '行政处罚条数',
      value: res.data.length
    }]
    // 企业数量 被处罚企业数  行政处罚条数
  })
}

const xzqzzxData = ref([])

/** 查询行政强制执行 */
function obtaingetAdministrativeEnforcement() {
  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
    }]
  })
}


const ssyjList = ref([])

/** 查询经营异常 */
function obtaingetBusinessAdnormalities() {
  getBusinessAdnormalities(queryParams.value).then((res) => {
    // console.log("查询经营异常:", res)
    res.forEach(item => {
      const ObjectValue = {
        name: item.companyName,
        time: '经营异常',
        state: 0,
        img: gaojingkuang
      }
      ssyjList.value.push(ObjectValue)
    })
  })
}

/** 查询失信被执行人 */
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)
    })
  })
}

const init = async () => {
  await obtaingetNumberOfEnterprises();
  obtainCreditScoreList();
  obtaingetTrossDomesticProduct();
  obtaingetTopTenTaxation();
  obtaingetXiaoxiangCaiyinLoan();
  obtaingetTechnologyLoan();
  obtaingetHuiyuanLoan();
  obtaingetListedCompanies();
  obtaingetHighTechEnterprises();
  obtaingetTechnologySmallAndmediumSizedEnterprises();
  obtaingetPatentInformation();
  obtaingetAdministrativeSanction();
  obtaingetAdministrativeEnforcement();
  obtaingetBusinessAdnormalities();
  obtaingetDishonestDebtor();
  obtaingetSocialSecurity();
}
init();


// 如果需要的话，在beforeUnmount中清理资源

onBeforeUnmount(() => {
  if (map) {
    // 清理地图资源
    map.dispose();
    map = null;
  }
});
</script>

<style scoped lang="scss">
.Vbox {
  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");
    }

    .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%;

            .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;
                }
              }
            }
          }
        }

        .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: 1.2vw;
                color: #21F2FF;
              }

              .RPCBDName {
                font-weight: 500;
                font-size: 0.7vw;
                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;

          .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;
            }
          }
        }
      }
    }

    .boxBottom {
      position: absolute;
      z-index: 999;
      height: 150px;
      bottom: 0;
      width: 45vw;
      left: 27.5vw;
      display: flex;

      .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%;
        }

        .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;

          .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: 1vw;
                color: #21F2FF;
              }

              .RPCBDName {
                font-weight: 500;
                font-size: 0.8vw;
                color: #C9E2FF;
              }

              .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;
                }

                .HTBTCLD_text {
                  font-size: 1.05vw;
                }
              }

              .HTBTCL_time {
                font-size: 15px;
                display: flex;
                margin-top: 2px;

                img {
                  width: 100px;
                }

                div {
                  color: #ddd;
                }
              }
            }
          }

        }

        .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: 1vw;
                color: #21F2FF;
              }

              .RPCBDName {
                font-weight: 500;
                font-size: 0.8vw;
                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;

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