更改标题名称

src/views/cockpit/gdbh.vue

@@ -8,14 +8,60 @@
         </el-select>
       </div>
     </div>
-    <pie3d id="gdbh_echart_gdlr" :legendFlag=false unit="" ref="gdbh_echart_gdlr"></pie3d>
-    <pie3d id="gdbh_echart_gdlc" :legendFlag=false unit="" ref="gdbh_echart_gdlc"></pie3d>
-    <div class="legend_gdlx">
-      <div class="gdbh_echart_gdlr_legend">
+    <div v-show="tab == options[2].value">
+      <pie3d id="gdbh_echart_gdlr" :legendFlag=false unit="" ref="gdbh_echart_gdlr"></pie3d>
+      <pie3d id="gdbh_echart_gdlc" :legendFlag=false unit="" ref="gdbh_echart_gdlc"></pie3d>
+      <div class="legend_gdlx">
+        <div class="gdbh_echart_gdlr_legend">
 
+        </div>
+        <div class="gdbh_echart_gdlc_legend">
+
+        </div>
       </div>
-      <div class="gdbh_echart_gdlc_legend">
+    </div>
 
+    <div v-show="tab == options[1].value">
+      zpqh
+    </div>
+    <div v-show="tab == options[0].value">
+      <div class="content">
+        <div class="item">
+          <div class="icon">
+            <div class="icon_zxkg">
+
+            </div>
+          </div>
+          <div class="text">
+            <p>水田</p>
+            <span>673.56</span>公顷
+
+          </div>
+        </div>
+        <div class="item">
+          <div class="icon">
+            <div class="icon_zxkg">
+
+            </div>
+          </div>
+          <div class="text">
+            <p>水浇地</p>
+            <span>673.56</span>公顷
+
+          </div>
+        </div>
+        <div class="item">
+          <div class="icon">
+            <div class="icon_zxkg">
+
+            </div>
+          </div>
+          <div class="text">
+            <p>旱地</p>
+            <span>673.56</span>公顷
+
+          </div>
+        </div>
       </div>
     </div>
 
@@ -33,11 +79,11 @@ export default {
   data() {
     return {
       sdata: {},
-      tab: '耕地现状',
+      tab: 'gdxz',
       options: [
-        { value: "gdlx", label: "耕地流向" },
         { value: "gdxz", label: "耕地现状" },
         { value: "zbph", label: "占补平衡" },
+        { value: "gdlx", label: "耕地流向" },
 
       ],
     };
@@ -136,10 +182,13 @@ export default {
     // top: 10px;
     width: 98%;
     height: 100px;
+    position: absolute;
+    top: 0rem;
+    left: 2rem;
   }
 
   .item {
-    width: 50%;
+    width: 32%;
     height: 45px;
     display: inline-block;
     // border: #00FFFF 1px solid;
@@ -150,8 +199,10 @@ export default {
     height: 45px;
     padding: 2%;
     border-radius: 8px;
-    display: inline-block;
+    display: block;
     background: no-repeat 50%;
+    margin-left: 1rem;
+    margin-bottom: 0.5rem;
   }
 
   .icongdbh0 {
@@ -175,6 +226,8 @@ export default {
     // border: #00FFFF 1px solid;
     width: calc(100% - 50px);
     margin-bottom: 4px;
+    text-align: center;
+    margin-left: 0.3rem;
 
     p {
       // font-kerning: normal;
@@ -315,4 +368,62 @@ export default {
     color: #ecf6ff;
   }
 }
+
+
+
+.content {
+  position: absolute;
+  left: 1%;
+  width: 500px;
+  top: 18%;
+}
+
+.item {
+  width: 45%;
+  height: 30%;
+  display: inline-block;
+  // border: #00FFFF 1px solid;
+
+}
+
+.icon {
+  width: 50px;
+  padding: 1.5%;
+  border-radius: 8px;
+  display: inline-block;
+  height: 50px
+}
+
+.icon_zxkg {
+  background: no-repeat 50%;
+  background-image: url("/static/images/overview/icon_zxkg.png");
+  /* border: #00FFFF 1px solid; */
+  width: 45px;
+  height: 45px;
+  display: inline-block;
+
+}
+
+
+.text {
+  display: inline-block;
+  // border: #00FFFF 1px solid;
+  width: 170px;
+
+  p {
+    font-kerning: normal;
+    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+    font-weight: 700;
+    font-style: normal;
+    font-size: 14px;
+    color: #FFFFFF;
+  }
+
+  span {
+    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+    font-weight: 700;
+    font-style: normal;
+    color: #68F4FB;
+  }
+}
 </style>

src/views/viewer1.vue

@@ -11,7 +11,7 @@
             </div>
             <datePicker @dateChange="dateChange"></datePicker>
             <!-- <ser-center></ser-center> -->
-            <GKZB ref="gkzb_ref" />
+            <JSYD ref="gkzb_ref" />
             <JCBD />
             <BJXM />
             <TDSC />
@@ -26,7 +26,7 @@
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-import GKZB from './cockpit/gkzb';
+import JSYD from './cockpit/jsyd';
 import TDSC from './cockpit/tdsc';
 import HYSY from './cockpit/hysy';
 import TDSY from './cockpit/tdsy';
@@ -44,7 +44,7 @@ import hyqy from "../../static/data/460200_hyqy.json";
 import { cockpitInfo } from '@/api/cockpit'
 let manager = {};
 export default {
-    components: { GKZB, BJXM, TDSC, HYSY, TDSY, GDBH, STXF, WPJG, datePicker, JCBD },
+    components: { JSYD, BJXM, TDSC, HYSY, TDSY, GDBH, STXF, WPJG, datePicker, JCBD },
     data() {
         return {
             params: {