Jelajahi Sumber

可视化跟新

丁烨烨 1 tahun lalu
induk
melakukan
3cc286c49f

+ 1 - 0
src/api/visualization/index.js

@@ -44,6 +44,7 @@ export function getTopTenTaxation(query) {
     params: query
   })
 }
+
 // 查询潇湘财银贷
 export function getXiaoxiangCaiyinLoan(query) {
   return request({

TEMPAT SAMPAH
src/assets/visualizationimg/gaojingR.png


TEMPAT SAMPAH
src/assets/visualizationimg/gaojingkuang.png


TEMPAT SAMPAH
src/assets/visualizationimg/jiejueR.png


TEMPAT SAMPAH
src/assets/visualizationimg/zhengchangkuang.png


TEMPAT SAMPAH
src/assets/visualizationimg/zhuyiR.png


TEMPAT SAMPAH
src/assets/visualizationimg/zhuyikuang.png


+ 66 - 88
src/components/baseEcharts/index.vue

@@ -9,127 +9,95 @@ import { EChartsType } from 'echarts'
 import { onMounted, ref, watch, onBeforeUnmount, nextTick } from 'vue'
 
 const props = defineProps({
-    xDataArray: {
+    NamechartData: {
         // 柱形图x轴数据
         type: Array,
-        default: function () {
-            return ['1', '2', '3', '4', '5']
-        }
+        default: true
     },
-    yDataArray: {
-        //图标信息提示
+    ArrOneData: {
+        // 柱形图x轴数据
         type: Array,
-        default: function () {
-            return [
-                {
-                    name: '图例二',
-                    type: 'bar',
-                    label: {
-                        // 柱状图上的文字设置
-                        show: true, // 是否显示
-                        //   rotate: 60, // 文字旋转角度
-                        position: 'top' // 显示位置
-                    },
-                    // barWidth: '50%', // 柱的宽度
-                    barGap: '5%', // 多个并排柱子设置柱子之间的间距
-                    data: [2, 2, 7, 5, 7, 4]
-                },
-                {
-                    name: '图例三',
-                    type: 'bar',
-                    label: {
-                        show: true, // 是否显示
-                        position: 'top' // 显示位置
-                    },
-                    barGap: '5%', // 多个并排柱子设置柱子之间的间距
-                    data: [4, 2, 5, 8, 4, 2]
-                }
-            ]
-        }
+        default: true
+    },
+    ArrTwoData: {
+        // 柱形图x轴数据
+        type: Array,
+        default: true
     }
 })
+
 let myEchart: EChartsType
 const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id
 const myEchartData = () => {
     const option = {
-        // title: {
-        //   text: '接口请求耗时分布', // 标题文字
-        //   textStyle: {
-        //     color: '#C0C4CC', // 标题样式设置
-        //     fontWeight: 'bold' // 标题文字大小
-        //   }
-        // },
         legend: {
             //图标信息提示
             type: 'scroll',
-            orient: 'horizontal',
-            //   right: '50%',
             left: '40%',
             top: 0,
-            //   bottom: 20,
             align: 'auto',
-            icon: 'circle'
+            icon: 'circle', 
+            textStyle: {
+                color: "white"
+            }
         },
         grid: {
             //图表距离边框的偏离
             right: '8%', //图表距离容器右侧距离
-            left: '8%',
+            left: '12%',
             top: '20%',
             bottom: '20%'
         },
         tooltip: { trigger: 'axis' }, // 设置图案和容器的距离
         xAxis: {
             type: 'category',
-            //   name: '时间',
             nameLocation: 'end',
-            data: props.xDataArray
-            //   axisLabel: {
-            //     interval: 20 //制显示间隔
-            //     // rotate: 60 // 设置倾斜角度
-            //   }
-            //   // 坐标轴轴线
-            //   axisLine: {
-            //     show: false
-            //   },
-            //   // 坐标轴刻度
-            //   axisTick: {
-            //     show: false
-            //   },
-            //   // 刻度标签
-            //   axisLabel: {
-            //     show: false
-            //   }
+            data: props.NamechartData
         },
         yAxis: {
             type: 'value',
-            //   name: '值',
             nameLocation: 'end',
-            //   // 坐标轴轴线
-            //   axisLine: {
-            //     show: false
-            //   },
-            //   // 坐标轴刻度
-            //   axisTick: {
-            //     show: false
-            //   },
-            //   // 刻度标签
-            //   axisLabel: {
-            //     show: false
-            //   },
-            min: 0
-            //   splitLine: {
-            //     show: false // 不显示网格线
-            //   }
+            // 坐标轴轴线
+            axisLine: {
+                show: false
+            },
+            // 坐标轴刻度
+            axisTick: {
+                show: false
+            },
+            min: 0,
+            splitLine: {
+                show: false // 不显示网格线
+            }
             // axisLabel: { formatter: '{value} ' },
         },
-        series: props.yDataArray,
+        series: [
+            {
+                name: '2023',
+                type: 'bar',
+                stack: 'Ad',
+                emphasis: {
+                    focus: 'series'
+                },
+                data: props.ArrOneData
+            },
+            {
+                name: '2024',
+                type: 'bar',
+                stack: 'Ad',
+                emphasis: {
+                    focus: 'series'
+                },
+                data: props.ArrTwoData
+            }
+        ],
         dataZoom: [
             // 数据选择范围 最下面的范围拉条
             {
                 type: 'slider', // 开启滑动条
                 show: true, // 显示缩放条
                 start: 0,
-                end: 100,
+                end: 20,
                 backgroundColor: '#26CAF026',
                 selectedDataBackground: {
                     lineStyle: {
@@ -139,12 +107,9 @@ const myEchartData = () => {
                         color: '#26CAF0'
                     }
                 },
-                // handleSize: '150%',
                 bottom: '3%',
-                height: 10,
+                height: 14,
                 brushSelect: false,
-                handleIcon:
-                    'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAABQtJREFUWEfNmVtMI2UUx883M/SybXfbQNht4wM3dxMgqNEIMc26+oIYfFB4EROzhocmWizECyGRtKsRa8wuEULCPiyiEZNNQIObUN92TSSLGBL7QBYtaDUbKNIGKtPpbS7mm+10p9OyHVZo2mQyk5nv8vv+Z86Z850iKP5DsibitcfjIQYHB5+hKOo5kiSfBICzAGBFCJ3EzwVB+BcAtnieD3Act8IwzK2enp7bPp+Px49l40nX8nviEFIb+eRy1EL3UTgctlosFhdBEK8DwOnia8tpsZ1Op78OBAJjTU1NWwrIQqDivYIgiomR3+/XNzc3v0sQxPsAcOKQYMrmTCKRuDw5OXllYGCAyTzEMNIhtS8IqARGDMO06fX6rwCg/n+C5XQXBOGPUCj0hs1m+7kAZFbRvPdL/r6l0+kPKIq6dJRgeXIyzIcGg+ETmYI5ahYEDAQCpvr6+msIoe7jhJPGZln226mpKYfD4diXOYgIWggQ8Tx/vVRwEmQqlfpOq9W+plRSAsyeS2HWg6xC0/RHJpPJm4EUQxIGy8JlHGKxFGY9aI6NjY3nGxoasONgE/NZQL/ff6KlpcV/1N562MXyPP9nf39/6/j4eEyuIOI4bpggCI+aARO8AAkewEzlh9FggoMaHZk3DM3hPgJUVRBFp6Bp+uOMqe8pGA6HbZWVlb+rCcKsIMAjS3sQYQW489QpaNDfh/H+HYehYBwcVi1MPmrIgmC4M7d3ISkAbLWZ1UAyc3Nzj3d3d29iQILjOC9BEO8VXRoAYIVql6Ni0y/OGuDiGW2228XfaPhyOwXPnqLg1mPiZ1n8yfvcbDHBBXNF0alomv7cZDINI4/HQ7nd7rtqv62lAhQE4Z+6urpzKB6Pn9fpdD8WXVIBNY5TQTzd2traCyidTrspilLlHEpzHTdgNBodwV+N7xFCL5Wjgslk0ocB1xBC58oRkGXZAAaMSpmwGshSOQlmwZk5EgRBmW4/kLOUgBik/AHL3sRl7yQsy94gSbJTjYOUOg4mEokfUDKZ9Gg0Gnc5AkYiES/a3d29YDabb5Yj4MrKSifq6OjQLiws/FWOyYLNZmvG6RaVSqW8FRUV76hRsVRxcG9vb9xisVwSAVdXV22NjY13DpOwhlkB1g6ZsLIAcLdVXcI6MTHxtNPpDImAOGDH4/FhnU43rEbFeym/AGYqP31/UMqPxzaSB5WD7s8ciUQ+raqq+kzak4iAo6OjBpfLtYIQqlMDeVxtOI4LdnV1nZ+fn8d1G3FPgjcVWAq0ubnZZrVaVSevxwG5uLj4ot1uX5ZvOzGguDfJmHpIp9OpjotHCbmzs+Otrq6+LNu4iwqKYLIzzrK/oSjqlaOcvNhYsVjshtFo7MVmVVYWJMAs5NjY2EmHw3FVo9G8XGzgo3iO4ZxO59vT09NS8UisKkhOIrlinpr7+/tDRqNRlWc/LGjGrFdkyknlt5zajFQCkZ8xOLG+vt5aW1t7jSCI2oeFKNQPe+vS0tKbdrv9lwK1wayZlWBiEqt8L/v6+gwjIyMuo9E4oCaYF1kIE4lExnt7eycyoUTM7mWHBJdbPMqASVE0773E0LOzs9b29va3DAbDqwih6sMoijfi0Wj0+szMzFX8hcj0lYMpr/PLb5lOB5lbuk/U1NSQPp+v1Wq14k3/EyRJNpAkeVr+NwTHcdssy27EYrFfg8HgT52dncuhUAhPqlRMXuHPOofkyf8BM+lL3UtbDgUAAAAASUVORK5CYII='
             }
         ]
     }
@@ -154,7 +119,7 @@ const myEchartData = () => {
 
 watch(
     //监控数据变化
-    () => props.xDataArray,
+    () => props.NamechartData,
     () => {
         setTimeout(() => {
             myEchartData()
@@ -162,9 +127,10 @@ watch(
     },
     { deep: true }
 )
+
 watch(
     //监控数据变化
-    () => props.yDataArray,
+    () => props.ArrOneData,
     () => {
         setTimeout(() => {
             myEchartData()
@@ -172,6 +138,18 @@ watch(
     },
     { deep: true }
 )
+
+watch(
+    //监控数据变化
+    () => props.ArrTwoData,
+    () => {
+        setTimeout(() => {
+            myEchartData()
+        }, 500)
+    },
+    { deep: true }
+)
+
 onMounted(() => {
     setTimeout(() => {
         const dom = document.getElementById(`echart${timeId.value}`) as any

+ 274 - 142
src/views/visualization/index.vue

@@ -23,7 +23,8 @@
                 <div class="leftTwoBox">
                     <div class="leftGDPTitle">生产总值</div>
                     <div class="leftGDPContent">
-                        <baseEcharts></baseEcharts>
+                        <baseEcharts :NamechartData="NamechartData" :ArrOneData="ArrOneData" :ArrTwoData="ArrTwoData">
+                        </baseEcharts>
                     </div>
                 </div>
                 <div class="leftThreeBox">
@@ -48,23 +49,13 @@
                     <div class="PCFLTitle">园区特色融资贷款</div>
                     <div class="PCFLContent">
                         <div class="PCFLNumber">
-                            <div class="RPCBData">
-                                <div class="RPCBDNumber">1000</div>
-                                <div class="RPCBDName">潇湘财银贷</div>
-                            </div>
-                            <div class="RPCBData">
-                                <div class="RPCBDNumber">2000</div>
-                                <div class="RPCBDName">惠园贷</div>
-                            </div>
-                            <div class="RPCBData">
-                                <div class="RPCBDNumber">1500</div>
-                                <div class="RPCBDName">科技贷</div>
+                            <div 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">
-                            <div><img src='../../assets/visualizationimg/onepick.png' alt=""></div>
-                            <div><img src='../../assets/visualizationimg/twopack.png' alt=""></div>
-                            <div><img src='../../assets/visualizationimg/threepick.png' alt=""></div>
+                            <div v-for="(item, index) in sumUsingNumber" :key="index"><img :src=item.img></div>
                         </div>
                     </div>
                 </div>
@@ -77,8 +68,8 @@
                             </div>
                             <div class="RPCBData">
                                 <div class="RPCBDName">{{ item.title }}</div>
-                                <div class="RPCBDNumber">{{ item.value }}</div>
-                                <div class="RPCBDRatio">{{ item.ratio }}</div>
+                                <div class="RPCBDNumber">{{ item.value }}(家)</div>
+                                <div class="RPCBDRatio">{{ item.ratio }}%</div>
 
                             </div>
                         </div>
@@ -106,46 +97,16 @@
                     <div class="RICBTContent">
                         <div class="RICBTCBoxOne">
                             <div class="" style="
-                            margin-left: 20px;">
-                                <div class="proportion">70%</div>
-                                <div class="administrativeS">行政处罚</div>
-                            </div>
-                            <div class="" style="
-                            margin-left: 20px;">
-                                <div class="proportion">119</div>
-                                <div class="administrativeS">企业数量</div>
-                            </div>
-                            <div class="" style="
-                            margin-left: 20px;">
-                                <div class="proportion">70</div>
-                                <div class="administrativeS">被处罚企业数</div>
-                            </div>
-                            <div class="" style="
-                            margin-left: 20px;">
-                                <div class="proportion">20</div>
-                                <div class="administrativeS">行政处罚条数</div>
+                            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;">
-                                <div class="proportion">70%</div>
-                                <div class="administrativeS">行政处罚</div>
-                            </div>
-                            <div class="" style="
-                            margin-left: 20px;">
-                                <div class="proportion">119</div>
-                                <div class="administrativeS">企业数量</div>
-                            </div>
-                            <div class="" style="
-                            margin-left: 20px;">
-                                <div class="proportion">70</div>
-                                <div class="administrativeS">被处罚企业数</div>
-                            </div>
-                            <div class="" style="
-                            margin-left: 20px;">
-                                <div class="proportion">20</div>
-                                <div class="administrativeS">行政处罚条数</div>
+                            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> -->
@@ -153,9 +114,27 @@
                 </div>
                 <div class="leftOneBox">
                     <div class="leftOBTitle">风险预警</div>
-                    <div class="leftOBContent">
-                        <baseEcharts></baseEcharts>
-                    </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>
@@ -214,39 +193,6 @@ import eight from '@/assets/visualizationimg/eight.png';
 import nine from '@/assets/visualizationimg/nine.png';
 import ten from '@/assets/visualizationimg/ten.png';
 
-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 = [{
-    title: '入驻企业',
-    value: 123,
-    img: parkOne
-}, {
-    title: '上市企业',
-    value: 400,
-    img: parktwo
-}, {
-    title: '高新技术企业',
-    value: 12,
-    img: parkthree
-}, {
-    title: '科技型中小企业',
-    value: 900,
-    img: parkfour
-}, {
-    title: '占地面积',
-    value: 12,
-    img: parkfive
-}, {
-    title: '园区企业专利数',
-    value: 11,
-    img: parksix
-}]
 const RanKingData = [{
     name: '湖南骏泰新材料科技有限责任公司',
     value: '66.25',
@@ -288,19 +234,6 @@ const RanKingData = [{
     value: '66.25',
     mig: ten
 }]
-const business = [{
-    title: '园区纳税企业',
-    value: 81,
-    ratio: '70%',
-    state: 1,
-    img: parkOne
-}, {
-    title: '园区缴纳社保企业',
-    value: 91,
-    ratio: '80%',
-    state: 0,
-    img: parktwo
-}]
 const gradationMun = [{
     name: "3A级企业",
     state: 3,
@@ -463,7 +396,6 @@ getClassificationList()
 const PieChartData = ref([]);
 function obtainCreditScoreList() {
     getCreditScoreList(queryParams.value).then((res) => {
-        console.log("评价分析:", res)
         const state1Array = [];
         const state2Array = [];
         const state3Array = [];
@@ -494,108 +426,272 @@ function obtainCreditScoreList() {
                 { value: state6Array.length, name: 'D' },
             ]
         });
-
-
-        console.log(111, PieChartData)
     })
 }
 
 /** 查询产值 */
+const NamechartData = ref([]);
+const ArrOneData = ref([]);
+const ArrTwoData = ref([]);
 function obtaingetTrossDomesticProduct() {
     getTrossDomesticProduct(queryParams.value).then((res) => {
-        console.log("查询产值:", res)
+        const state2023Array = [];
+        const state2024Array = [];
+        const name = [];
+        res.forEach(item => {
+            if (item.annualAmount === '2023') {
+                state2023Array.push(item.firstQuarterAmount);
+                name.push(item.enterpriseName)
+            } else if (item.annualAmount === '2024') {
+                state2024Array.push(item.firstQuarterAmount);
+            }
+
+            NamechartData.value = name
+            ArrOneData.value = state2023Array
+            ArrTwoData.value = state2024Array
+
+            // console.log(1112,TrossDomesticChartData.value.name)
+        })
     })
 }
 
-/** 查询纳税 */
+/** 查询纳税Top10 */
 function obtaingetTopTenTaxation() {
     getTopTenTaxation(queryParams.value).then((res) => {
-        console.log("查询纳税:", res)
+        console.log("查询纳税Top10:", res)
     })
 }
 
+import sumUsingNumberOne from '@/assets/visualizationimg/onepick.png';
+import sumUsingNumberTwo from '@/assets/visualizationimg/twopack.png';
+import sumUsingNumberthree from '@/assets/visualizationimg/threepick.png';
+
+const sumUsingNumber = [
+    {
+        sum: '0',
+        name: '潇湘财银贷',
+        img: sumUsingNumberOne
+    }, {
+        sum: '0',
+        name: '科技贷',
+        img: sumUsingNumberTwo
+    }, {
+        sum: '0',
+        name: '惠园贷',
+        img: sumUsingNumberthree
+    }
+];
 /** 查询潇湘财银贷 */
 function obtaingetXiaoxiangCaiyinLoan() {
     getXiaoxiangCaiyinLoan(queryParams.value).then((res) => {
-        console.log("查询潇湘财银贷:", res)
+        const state1Array = [];
+        res.data.forEach(item => {
+            state1Array.push(item.currentLoanBalance);
+        })
+        const sum = state1Array.reduce((accumulator, currentValue) => {
+            return accumulator + Number(currentValue);
+        }, 0);
+        sumUsingNumber[0].sum = sum;
     })
 }
 /** 查询评科技贷: */
 function obtaingetTechnologyLoan() {
     getTechnologyLoan(queryParams.value).then((res) => {
-        console.log("查询评科技贷", 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;
     })
 }
 /** 惠园贷: */
 function obtaingetHuiyuanLoan() {
     getHuiyuanLoan(queryParams.value).then((res) => {
-        console.log("惠园贷:", 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;
     })
 }
+
+
+const business = [{
+    title: '园区纳税企业',
+    value: 81,
+    ratio: '70%',
+    state: 1,
+    img: parkOne
+}, {
+    title: '园区缴纳社保企业',
+    value: '',
+    ratio: '',
+    state: 0,
+    img: parktwo
+}]
+/** 查询社保 */
+function obtaingetSocialSecurity() {
+    getSocialSecurity(queryParams.value).then((res) => {
+
+        business[1].value = res.data.length;
+        business[1].ratio = (res.data.length / 119 * 100).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([{
+    title: '占地面积',
+    value: 12,
+    img: parksix
+}])
 /** 查询入驻企业、企业数量 */
 function obtaingetNumberOfEnterprises() {
     getNumberOfEnterprises(queryParams.value).then((res) => {
-        console.log("入驻企业、企业数量:", res)
+        const ObjectValue = {
+            title: '入驻企业',
+            value: res.data.length,
+            img: parkOne
+        }
+        parkData.value.push(ObjectValue)
     })
 }
 /** 查询上市企业 */
 function obtaingetListedCompanies() {
     getListedCompanies(queryParams.value).then((res) => {
-        console.log("查询上市企业:", res)
+        const ObjectValue = {
+            title: '上市企业',
+            value: res.length,
+            img: parktwo
+        }
+        parkData.value.push(ObjectValue)
     })
 }
 /** 查询高新技术企业 */
 function obtaingetHighTechEnterprises() {
     getHighTechEnterprises(queryParams.value).then((res) => {
-        console.log("查询高新技术企业:", res)
+        const ObjectValue = {
+            title: '高新技术企业',
+            value: res.data.length,
+            img: parkthree
+        }
+        parkData.value.push(ObjectValue)
     })
 }
 /** 查询科技中小型企业 */
 function obtaingetTechnologySmallAndmediumSizedEnterprises() {
     getTechnologySmallAndmediumSizedEnterprises(queryParams.value).then((res) => {
-        console.log("查询科技中小型企业:", res)
+        const ObjectValue = {
+            title: '科技型中小企业',
+            value: res.data.length,
+            img: parkfour
+        }
+        parkData.value.push(ObjectValue)
     })
 }
 /** 查询专利信息 */
 function obtaingetPatentInformation() {
     getPatentInformation(queryParams.value).then((res) => {
-        console.log("查询专利信息:", res)
+        const ObjectValue = {
+            title: '园区企业专利数',
+            value: res.data.length,
+            img: parkfive
+        }
+        parkData.value.push(ObjectValue)
     })
 }
-/** 查询行政处罚 */
+
+const hyhgData = ref([])
+/** 查询行业合规 */
 function obtaingetAdministrativeSanction() {
     getAdministrativeSanction(queryParams.value).then((res) => {
-        console.log("查询行政处罚:", 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
+        }]
+        // 企业数量 被处罚企业数  行政处罚条数
     })
 }
+const xzqzzxData = ref([])
+
 /** 查询行政强制执行 */
 function obtaingetAdministrativeEnforcement() {
     getAdministrativeEnforcement(queryParams.value).then((res) => {
-        console.log("查询行政强制执行:", 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
+        }]
     })
 }
+
+import gaojingkuang from '@/assets/visualizationimg/gaojingkuang.png';
+import zhuyikuang from '@/assets/visualizationimg/zhuyikuang.png';
+
+
+const ssyjList = ref([])
 /** 查询经营异常 */
 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)
+        })
     })
 }
 /** 查询失信被执行人 */
 function obtaingetDishonestDebtor() {
     getDishonestDebtor(queryParams.value).then((res) => {
         console.log("查询失信被执行人:", res)
-    })
-}
-/** 查询社保 */
-function obtaingetSocialSecurity() {
-    getSocialSecurity(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();
+// obtaingetTopTenTaxation();
 obtaingetXiaoxiangCaiyinLoan();
 obtaingetTechnologyLoan();
 obtaingetHuiyuanLoan();
@@ -770,18 +866,22 @@ onBeforeUnmount(() => {
                         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;
                             }
                         }
@@ -790,22 +890,9 @@ onBeforeUnmount(() => {
                     .PCFLImg {
                         margin-top: -40px;
                         display: flex;
-                        justify-content: space-around;
+                        justify-content: center;
                         align-items: center;
                     }
-
-                    // .RPCBox {
-                    //     width: 100%;
-                    //     height: 70%;
-                    //     display: flex;
-                    //     align-items: center;
-                    //     justify-content: center;
-
-                    //     .RPCBImg {
-                    //         width: 60px;
-                    //         height: 60px;
-                    //     }
-                    // }
                 }
             }
 
@@ -917,6 +1004,51 @@ onBeforeUnmount(() => {
                 .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 {
@@ -931,7 +1063,7 @@ onBeforeUnmount(() => {
                         height: 70%;
                         display: flex;
                         align-items: center;
-                        justify-content: center;
+                        // justify-content: center;
 
                         .RPCBImg {
                             width: 60px;