1

src/views/BusDynamics/TaxMonitoring/index.vue

@@ -1,9 +1,86 @@
 <template>
-    <div>
-        企业税收监测（不开放）
-    </div>
-  </template>
-  
-  <script setup name="Confirmation">
-  </script>
-  
+    <div ref="echartsRef" style="width: 100%; height: 80vh;"></div>
+</template>
+   
+<script setup>
+import { onMounted, ref } from 'vue';
+import * as echarts from 'echarts';
+import { getSocialSecurity } from '@/api/visualization/index'
+
+const data = reactive({
+    form: {},
+    queryParams: {
+        pageNum: 1,
+        pageSize: 100000,
+        unifiedSocialCreditCode: '',
+        condition: "",
+        grade: null,
+        total: null
+    },
+})
+const { queryParams } = toRefs(data)
+const echartsRef = ref(null);
+
+/** 查询社保 */
+function getEchartsData() {
+    getSocialSecurity(queryParams.value).then((res) => {
+        console.log(res)
+        const response = res.data
+
+        const namesArray = response.map(obj => obj.enterpriseName);
+        const valuesArray = response.map(obj => obj.avgMonthlyPaymentBand);
+
+        console.log(namesArray, valuesArray)
+
+        const chart = echarts.init(echartsRef.value);
+        const option = {
+            title: {
+                text: '税收检测'
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow'
+                }
+            },
+            legend: {},
+            grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+            },
+            xAxis: {
+                type: 'value',
+                boundaryGap: [0, 0.01]
+            },
+            yAxis: {
+                type: 'category',
+                data: namesArray
+            },
+            series: [
+                {
+                    name: '2023',
+                    type: 'bar',
+                    data: valuesArray
+                }
+            ],
+            dataZoom: [{ // 这是一个 dataZoom 组件，可以控制 x 轴或 y 轴的区域缩放
+                type: 'slider', // 这里设置为 slider 类型，表示使用滑动条形式的 dataZoom 组件
+                yAxisIndex: 0, // 表示这个 dataZoom 组件控制第一个 y 轴
+                start: 10, // 数据窗口范围的起始百分比, 表示从10%的位置开始显示
+                end: 30 // 数据窗口范围的结束百分比, 表示到60%的位置结束
+            }]
+        };
+
+        chart.setOption(option);
+    })
+}
+onMounted(() => {
+    getEchartsData();
+});
+</script>
+   
+<style>
+/* 样式内容 */
+</style>

src/views/CEEnterprise/DEInformation/index.vue

@@ -1,8 +1,86 @@
 <template>
-  <div>
-    园区失信企业信息公示
-  </div>
+  <div ref="echartsRef" style="width: 100%; height: 80vh;"></div>
 </template>
+ 
+<script setup>
+import { onMounted, ref } from 'vue';
+import * as echarts from 'echarts';
+import { getDishonestDebtor } from '@/api/visualization/index'
 
-<script setup name="Confirmation">
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 100000,
+    unifiedSocialCreditCode: '',
+    condition: "",
+    grade: null,
+    total: null
+  },
+})
+const { queryParams } = toRefs(data)
+const echartsRef = ref(null);
+
+/** 查询社保 */
+function getEchartsData() {
+  getDishonestDebtor(queryParams.value).then((res) => {
+    console.log(res)
+    const response = res.data
+
+    const namesArray = response.map(obj => obj.enterpriseName);
+    const valuesArray = response.map(obj => obj.avgMonthlyPaymentBand);
+
+    console.log(namesArray, valuesArray)
+
+    const chart = echarts.init(echartsRef.value);
+    const option = {
+      title: {
+        text: '失信企业信息'
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow'
+        }
+      },
+      legend: {},
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
+      },
+      xAxis: {
+        type: 'value',
+        boundaryGap: [0, 0.01]
+      },
+      yAxis: {
+        type: 'category',
+        data: namesArray
+      },
+      series: [
+        {
+          name: '2023',
+          type: 'bar',
+          data: valuesArray
+        }
+      ],
+      dataZoom: [{ // 这是一个 dataZoom 组件，可以控制 x 轴或 y 轴的区域缩放
+        type: 'slider', // 这里设置为 slider 类型，表示使用滑动条形式的 dataZoom 组件
+        yAxisIndex: 0, // 表示这个 dataZoom 组件控制第一个 y 轴
+        start: 10, // 数据窗口范围的起始百分比, 表示从10%的位置开始显示
+        end: 30 // 数据窗口范围的结束百分比, 表示到60%的位置结束
+      }]
+    };
+
+    chart.setOption(option);
+  })
+}
+onMounted(() => {
+  getEchartsData();
+});
 </script>
+ 
+<style>
+/* 样式内容 */
+</style>