海域使用接口

src/views/cockpitNew1/hysy.vue

@@ -16,13 +16,19 @@
 
                 </div>
                 <div class="text">
-                    <span>收储项目</span>
-                    <span class="count1">33</span>
-                    <span class="unit">个</span>
-
-                    <span>收储总面积</span>
-                    <span class="count2">213124.45</span>
-                    <span class="unit">公顷</span>
+                    <span>海域使用权
+                        <br>
+                        出让项目</span>
+                    <div class="text_item">
+                        <span class="count1">{{ label_text.xzqhdm_number }}</span>
+                        <span class="unit">个</span>
+                    </div>
+
+                    <div class="text_item1">
+                        <span>用海总面积</span>
+                        <span class="count2">{{ label_text.zhmj }}</span>
+                        <span class="unit">公顷</span>
+                    </div>
                 </div>
             </div>
             <div id="hysyEchart">
@@ -35,11 +41,23 @@
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+import { cockpitInfo } from '@/api/cockpit'
 
 export default {
     components: {},
     data() {
-        return {};
+        return {
+            label_text: {
+                xzqhdm_number: 0,
+                zhmj: 0,
+
+            },
+            label_echart: {
+                x: [],
+                bar: [],
+
+            }
+        };
     },
     //监听属性 类似于data概念
     computed: {},
@@ -48,10 +66,13 @@ export default {
     //方法集合
     beforeCreate() { }, //生命周期 - 创建之前
     created() {
+        this.label_data();
+        this.echart_data();
     }, //生命周期 - 创建完成（可以访问当前this实例）
     beforeMount() { }, //生命周期 - 挂载之前
     methods: {
         getRenKou() {
+            const that = this;
             var dom = document.getElementById('hysyEchart');
 
             var myChart = window.echarts.init(dom);
@@ -147,8 +168,9 @@ export default {
             echarts.graphic.registerShape('CubeRight', CubeRight)
             echarts.graphic.registerShape('CubeTop', CubeTop)
             echarts.graphic.registerShape('CubeBottom', CubeBottom)
-            const dataX = ["渔业用海", "工业用海", "造地工程", "旅游娱乐", "交通运输"]
-            const barData = [45, 33, 11, 20, 3]
+            const dataX = that.label_echart.x;
+            const barData = that.label_echart.bar;
+            debugger
             let option = {
                 //你的代码
                 backgroundColor: 'rgba(0,0,0,0)',
@@ -186,12 +208,12 @@ export default {
                 xAxis: {
                     type: 'category',
                     data: dataX,
-                    axisTick:{
+                    axisTick: {
                         show: false,
                     },
                     axisLine: {
                         show: true,
-                      
+
                         lineStyle: {
                             width: 1,
                             color: 'rgba(239, 247, 253, .7)'
@@ -302,9 +324,47 @@ export default {
 
             myChart.setOption(option);
         },
+        async label_data() {
+            const that = this;
+            let obj = {
+                beginTime: '20240101',
+                endTime: '20240501',
+                jscType: 'jsc_hysyq_ztsh',
+                id: '460204'
+            };
+            let data = await cockpitInfo(obj);
+            that.label_text.xzqhdm_number = data.data[0].xzqhdm_number
+            that.label_text.zhmj = data.data[0].zhmj
+
+        },
+        async echart_data() {
+            const that = this;
+            let obj = {
+                beginTime: '20240101',
+                endTime: '20240601',
+                jscType: 'jsc_hysyq_yelx',
+                id: '46'
+            }
+
+            let data = await cockpitInfo(obj);
+
+
+            const xArray = data.data.map(item => item.yhlx_name);
+            const barArray = data.data.map(item => item.zhmj);
+
+            that.label_echart = {
+                x: xArray,
+                bar: barArray
+            }
+            console.log(that.label_echart, "label_echartlabel_echart");
+            this.getRenKou();
+
+            // that.label_text.xzqhdm_number = data.data[0].xzqhdm_number
+            // that.label_text.zhmj = data.data[0].zhmj
+
+        }
     },
     mounted() {
-        this.getRenKou();
     },
     beforeUpdate() { }, //生命周期 - 更新之前
     updated() { }, //生命周期 - 更新之后
@@ -372,8 +432,8 @@ export default {
     .text {
         position: relative;
         left: 3.5rem;
-        top: 0.5rem;
-        font-size: 15px;
+        top: 0.2rem;
+        font-size: 12px;
         font-weight: 600;
 
         .unit {
@@ -387,6 +447,18 @@ export default {
         .count2 {
             color: RGBA(100, 218, 255, 1);
         }
+
+        .text_item {
+            position: relative;
+            left: 5rem;
+            bottom: 1.7rem;
+        }
+
+        .text_item1 {
+            position: relative;
+            left: 10rem;
+            bottom: 3rem;
+        }
     }
 }
 

src/views/cockpitNew1/tdsc.vue

@@ -68,7 +68,8 @@ export default {
   components: {},
   data() {
     return {
-      is_xzqh: false
+      is_xzqh: false,
+      
     };
   },
   //监听属性 类似于data概念
@@ -639,11 +640,11 @@ export default {
     position: relative;
     left: 3.5rem;
     top: 0.5rem;
-    font-size: 15px;
+    font-size: 12px;
     font-weight: 600;
 
     .unit {
-      margin-right: 3rem;
+      margin-right: 5rem;
     }
 
     .count1 {