进出平衡模块

src/views/cockpit/gdbh.vue

@@ -99,94 +99,49 @@
         </div>
       </div>
 
-      <!-- <div v-show="tab == options[1].value">
+      <div v-show="tab == options[2].value">
         <div class="content">
-          <div class="item_back">
+          <div class="item">
             <div class="icon">
-              <div class="icon_jsyd">
+              <div class="icon_st">
 
               </div>
             </div>
-            <div class="text_back">
-              <p>建设用地占用耕地</p>
-              <span>673.56</span>km²
+            <div class="text">
+              <p>流入耕地</p>
+              <span>{{ store.state.cockpit_gdbh.gdxz.title.st_mj }}</span>km²
 
             </div>
           </div>
-          <div class="item_back">
+          <div class="item">
             <div class="icon">
-              <div class="icon_bcyd">
+              <div class="icon_sjd">
 
               </div>
             </div>
-            <div class="text_back">
-              <p>补充耕地</p>
-              <span>{{ store.state.cockpit_gdbh.zbph.bcgd.jszgm }}</span>km²
+            <div class="text">
+              <p>流出耕地</p>
+              <span>{{ store.state.cockpit_gdbh.gdxz.title.sjd_mj }}</span>km²
 
             </div>
           </div>
-        </div>
-        <div class="info">
-          <div class="left_info">
-
-            <ul>
-              <li>
-                <div class="icon"></div>
-
-                <span class="zbph_label">其中水田</span>
-                <br>
-
-                <span class="zbph_value_unit">
-                  <span class="zbph_value">0</span>
-                  <span class="zbph_unit">km²</span>
-                </span>
-              </li>
-
-              <li>
-                <div class="icon"></div>
-
-                <span class="zbph_label">损失粮食产能</span>
-                <br>
+          <div class="item">
+            <div class="icon">
+              <div class="icon_ht">
 
-                <span class="zbph_value_unit">
-                  <span class="zbph_value">0</span>
-                  <span class="zbph_unit">吨</span>
-                </span>
-              </li>
+              </div>
+            </div>
+            <div class="text">
+              <p>面积变化</p>
+              <span>{{ store.state.cockpit_gdbh.gdxz.title.hd_mj }}</span>km²
 
-            </ul>
+            </div>
           </div>
-          <div class="right_info">
-            <ul>
-              <li>
-                <div class="icon"></div>
-
-                <span class="zbph_label">其中水田</span>
-                <br>
-
-                <span class="zbph_value_unit">
-                  <span class="zbph_value">{{ store.state.cockpit_gdbh.zbph.bcgd.xzstmj }}</span>
-                  <span class="zbph_unit">公顷</span>
-                </span>
-              </li>
-
-              <li>
-                <div class="icon"></div>
-
-                <span class="zbph_label">损失粮食产能</span>
-                <br>
-
-                <span class="zbph_value_unit">
-                  <span class="zbph_value">{{ store.state.cockpit_gdbh.zbph.bcgd.jszgm }}</span>
-                  <span class="zbph_unit">吨</span>
-                </span>
-              </li>
+        </div>
 
-            </ul>
-          </div>
+        <pie3d id="jcpg" unit="亩" :legendFlag=true ref="jcpg"></pie3d>
 
-        </div>
-      </div> -->
+      </div>
       <div v-show="tab == options[0].value">
         <div class="content">
           <div class="item">
@@ -251,8 +206,7 @@ export default {
       options: [
         { value: "gdxz", label: "耕地现状" },
         { value: "zbph", label: "占补平衡" },
-        // { value: "gdlx", label: "耕地流向" },
-
+        { value: "jcph", label: "进出平衡" },
       ],
     };
   },
@@ -609,6 +563,25 @@ export default {
       myChart.setOption(option);
 
     },
+    async init_jcpg(params) {
+      let res = await QueryList({
+        jscType: "jsc_stxf_ywfl_tdzz",
+        id: params ? params.id : '4602'
+
+      });
+      let arr = [];
+
+      res.data.forEach((res) => {
+        arr.push({
+          name: res.zzlx,
+          value: res.xmsl
+        });
+
+
+
+      })
+      this.$refs.jcpg.setOptions(arr);
+    },
   },
   mounted() {
     // const optionsData = [
@@ -624,7 +597,7 @@ export default {
       this.init_info();
       this.init_gdxz_echart();
       this.init_zbph();
-
+      this.init_jcpg();
 
     })
   },
@@ -1027,4 +1000,13 @@ export default {
     height: 100%;
     float: right;
   }
-}</style>
+}
+
+#jcpg {
+  width: 27rem;
+  height: 10rem;
+  position: absolute;
+  right: -1rem;
+  top: 4.5rem;
+}
+</style>