1

src/views/BusDynamics/OPCMonitoring/index.vue

@@ -1,25 +1,25 @@
 <template>
-    <div ref="chartRef" style="width: 100%; height: 80vh;"></div>
+    <div ref="echartsRef" style="width: 100%; height: 80vh;"></div>
 </template>
    
 <script setup>
-// import { onMounted, onBeforeUnmount, ref } from 'vue';
-import {
-    ref,
-    onMounted,
-    onDeactivated,
-    onBeforeUnmount,
-} from "vue";
-
+import { onMounted, ref } from 'vue';
 import * as echarts from 'echarts';
 import { getOutputValueData } from "@/api/buscmonitoring/index";
-const chartRef = ref(null);
-const chartInstance = ref(null);
 
-// 重新窗口变化时，重新计算
-const resize = () => {
-    chartInstance.value && chartInstance.value.resize();
-};
+const data = reactive({
+    form: {},
+    queryParams: {
+        pageNum: 1,
+        pageSize: 100000,
+        unifiedSocialCreditCode: '',
+        condition: "",
+        grade: null,
+        total: null
+    },
+})
+const { queryParams } = toRefs(data)
+const echartsRef = ref(null);
 
 const fetchData = async () => {
     try {
@@ -79,19 +79,72 @@ const fetchData = async () => {
     }
 };
 
-onMounted(() => {
-    chartInstance.value = echarts.init(chartRef.value);
-    fetchData();
-    window.addEventListener("resize", resize);
-});
+/** 查询社保 */
+function getEchartsData() {
+    getOutputValueData(queryParams.value).then((res) => {
+        console.log(res)
+        const response = res.data
 
-// 页面keepAlive时，不监听页面
-onDeactivated(() => {
-    window.removeEventListener("resize", resize);
-});
+        const namesArray = response.map(obj => obj.detailedUnitName);
+        const valuesArray = response.map(obj => obj.industrialOutputValue);
+        const valuesLastArray = response.map(obj => obj.industrialOutputValueLastYear);
 
-onBeforeUnmount(() => {
-    window.removeEventListener("resize", resize);
-});
+        console.log(namesArray, valuesArray, valuesLastArray)
+
+        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
+                },
+                {
+                    name: '2024',
+                    type: 'bar',
+                    data: valuesLastArray
+                }
+            ],
+            dataZoom: [{ // 这是一个 dataZoom 组件，可以控制 x 轴或 y 轴的区域缩放
+                type: 'slider', // 这里设置为 slider 类型，表示使用滑动条形式的 dataZoom 组件
+                yAxisIndex: 0, // 表示这个 dataZoom 组件控制第一个 y 轴
+                start: 10, // 数据窗口范围的起始百分比, 表示从10%的位置开始显示
+                end: 30 // 数据窗口范围的结束百分比, 表示到60%的位置结束
+            }]
+        };
 
-</script>
+        chart.setOption(option);
+    })
+}
+onMounted(() => {
+    getEchartsData();
+});
+</script>
+   
+<style>
+/* 样式内容 */
+</style>

src/views/visualization/index.vue

@@ -55,7 +55,7 @@
                             </div>
                         </div>
                         <div class="PCFLImg">
-                            <div v-for="(item, index) in sumUsingNumber" :key="index" style="text-align:center;color:white">
+                            <div v-for="(item, index) in sumUsingNumber" :key="index">
                             <img :src=item.img>
                             <span>贷款企业数：{{item.number}}</span>
                             </div>
@@ -553,7 +553,7 @@ function obtaingetSocialSecurity() {
     getSocialSecurity(queryParams.value).then((res) => {
 
         business[1].value = res.data.length;
-        business[1].ratio = (res.data.length / 121 * 100).toFixed(2) + '%';
+        business[1].ratio = (res.data.length / 119 * 100).toFixed(2) + '%';
     })
 }
 
@@ -568,16 +568,24 @@ const parkData = ref([{
     title: '占地面积',
     value: 14070 + '亩',
     img: parksix
+},{
+    title: '入驻企业',
+    value: '',
+    img: ''
 }])
 /** 查询入驻企业、企业数量 */
 function obtaingetNumberOfEnterprises() {
     getNumberOfEnterprises(queryParams.value).then((res) => {
-        const ObjectValue = {
+        // const ObjectValue = {
+        //     title: '入驻企业',
+        //     value: res.data.length,
+        //     img: parkOne
+        // }
+        parkData.value[1] = {
             title: '入驻企业',
             value: res.data.length,
             img: parkOne
         }
-        parkData.value.push(ObjectValue)
     })
 }
 /** 查询上市企业 */
@@ -631,10 +639,10 @@ function obtaingetAdministrativeSanction() {
     getAdministrativeSanction(queryParams.value).then((res) => {
         hyhgData.value = [{
             name: '企业数量',
-            value: 121
+            value: 119
         }, {
             name: '行政处罚',
-            value: (res.data.length / 121).toFixed(2) * 100 + '%'
+            value: (res.data.length / 119).toFixed(2) * 100 + '%'
         }, {
             name: '被处罚企业数',
             value: res.data.length
@@ -652,10 +660,10 @@ function obtaingetAdministrativeEnforcement() {
     getAdministrativeEnforcement(queryParams.value).then((res) => {
         xzqzzxData.value = [{
             name: '企业数量',
-            value: 121
+            value: 119
         }, {
             name: '行政强制执行',
-            value: (res.data.length / 121).toFixed(2) * 100 + '%'
+            value: (res.data.length / 119).toFixed(2) * 100 + '%'
         }, {
             name: '被处罚企业数',
             value: res.data.length