数据调整

src/views/cockpitNew1/gdbh.vue

@@ -29,8 +29,8 @@ export default {
         { name: "高标准农田", prop: "gzl_yjjbntmj", unit: "km²" }, //耕地保有量
         { name: "补充耕地项目", prop: "xzqhdm_number", unit: "个" },
         { name: "永久基本农田", prop: "yjjbntmj", unit: "km²" },
-        { name: "补充耕地面积", prop: "mj", unit: "km²" }
-      ]
+        { name: "补充耕地面积", prop: "mj", unit: "km²" },
+      ],
     };
   },
   //监听属性 类似于data概念
@@ -48,9 +48,9 @@ export default {
     GetQueryOne_nt(datas) {
       let params = {
         ...datas,
-        jscType: "jsc_gdbh_ztgh_nt"
+        jscType: "jsc_gdbh_ztgh_nt",
       };
-      QueryOne(params).then(res => {
+      QueryOne(params).then((res) => {
         this.sdata = { ...this.sdata, ...res.data };
       });
     },
@@ -58,9 +58,8 @@ export default {
       let params = {
         ...datas,
         jscType: "jsc_gdbh_ztgh_bc",
-        id: 4603
       };
-      QueryOne(params).then(res => {
+      QueryOne(params).then((res) => {
         this.sdata = { ...this.sdata, ...res.data };
       });
     },
@@ -68,29 +67,28 @@ export default {
       let optionsData = [];
       let params = {
         ...datas,
-        jscType: "jsc_gdbh_yelx_nt"
+        jscType: "jsc_gdbh_yelx_nt",
       };
-      QueryList(params).then(res => {
-        res.data.forEach(edata => {
+      QueryList(params).then((res) => {
+        res.data.forEach((edata) => {
           optionsData.push({ name: edata.dlbmmc, value: edata.yjjbntmj });
-          this.eData.yData.push([edata.xzqhdm_number, edata.zlmj, edata.tzje]);
         });
         this.$nextTick(() => {
           this.$refs.echartRef.setOptions(optionsData);
         });
       });
-    }
+    },
   },
   mounted() {
-    const optionsData = [
-      { name: "水田", value: 50 },
-      { name: "水浇地", value: 20 },
-      { name: "旱地", value: 30 }
-    ];
-    this.$nextTick(() => {
-      this.$refs.echartRef.setOptions(optionsData);
-    });
-  }
+    // const optionsData = [
+    //   { name: "水田", value: 50 },
+    //   { name: "水浇地", value: 20 },
+    //   { name: "旱地", value: 30 },
+    // ];
+    // this.$nextTick(() => {
+    //   this.$refs.echartRef.setOptions(optionsData);
+    // });
+  },
 };
 </script>
 <style lang="scss" scoped>
@@ -99,14 +97,14 @@ export default {
   .content {
     // border: #00FFFF 1px solid;
     position: absolute;
-    left: 5%;
-    width: 400px;
+    left: 2%;
+    width: 98%;
     height: 140px;
     top: 10px;
   }
 
   .item {
-    width: 45%;
+    width: 50%;
     height: 45px;
     display: inline-block;
     // border: #00FFFF 1px solid;
@@ -137,7 +135,7 @@ export default {
   .text {
     display: inline-block;
     // border: #00FFFF 1px solid;
-    width: 100px;
+    width: calc(100% - 50px);
     margin-bottom: 4px;
 
     p {

src/views/cockpitNew1/serCenter.vue

@@ -4,7 +4,7 @@
       <!-- <div class="icon" :class="`icongdbh${i}`"></div> -->
       <div class="text">
         <p>{{ sd.name }}</p>
-        <span class="sdvalue">{{ sd.value || 0 }}</span>
+        <span class="sdvalue">{{ sdata[sd.props] || 0 }}</span>
         <span class="unit">{{ sd.unit }}</span>
       </div>
     </div>
@@ -19,13 +19,21 @@ export default {
   data() {
     return {
       sdlist: [
-        { name: "陆域", value: "", unit: "km²" },
-        { name: "海域", value: "", unit: "km²" },
-        { name: "海岸线", value: "", unit: "km²" },
-        { name: "耕地", value: "", unit: "km²" },
-        { name: "林地", value: "", unit: "km²" },
-        { name: "森林覆盖率", value: "", unit: "%" }
-      ]
+        { name: "陆域", props: "ly", unit: "km²" },
+        { name: "海域", props: "hy", unit: "km²" },
+        { name: "海岸线", props: "hax", unit: "km²" },
+        { name: "耕地", props: "gd", unit: "km²" },
+        { name: "林地", props: "ld", unit: "km²" },
+        { name: "森林覆盖率", props: "slfgl", unit: "%" },
+      ],
+      sdata: {
+        ly: 1621.4,
+        hy: 3226,
+        hax: 264.42,
+        gd: 121.4,
+        ld: 121.4,
+        slfgl: 21.4,
+      },
     };
   },
   //监听属性 类似于data概念
@@ -35,7 +43,7 @@ export default {
   //方法集合
 
   methods: {},
-  mounted() {}
+  mounted() {},
 };
 </script>
 <style lang="scss" scoped>

src/views/cockpitNew1/stxf.vue

@@ -4,7 +4,7 @@
       <!-- #content="row" -->
       <div class="selectTab">
         <el-select
-          v-model="value"
+          v-model="tab"
           placeholder="请选择"
           :popper-append-to-body="false"
           @change="changeCharts"
@@ -20,23 +20,11 @@
       </div>
     </template>
     <div class="stacontent">
-      <div class="item">
+      <div class="item" v-for="(sd, index) in sdlist[tab]" :key="index">
         <div class="itembg"></div>
-        <div class="text">综合整治项目</div>
-        <span>{{ sdata.xzqhdm_number || 0 }}</span>
-        个
-      </div>
-      <div class="item">
-        <div class="itembg"></div>
-        <div class="text">土地整治面积</div>
-        <span>{{ sdata.zlmj || 0 }}</span>
-        公顷
-      </div>
-      <div class="item">
-        <div class="itembg"></div>
-        <div class="text">总投资</div>
-        <span>{{ sdata.tzje || 0 }}</span>
-        万元
+        <div class="text">{{ sd.name }}</div>
+        <span>{{ sdata[tab][sd.prop] || 0 }}</span>
+        {{ sd.unit }}
       </div>
     </div>
     <Bar3d id="stxf_echart" ref="echartRef"></Bar3d>
@@ -56,20 +44,37 @@ export default {
       options: [
         { value: "tdxf", label: "土地综合整治" },
         { value: "ssxf", label: "山水工程" },
-        { value: "haxf", label: "海岸线保护" }
+        { value: "haxf", label: "海岸线保护" },
       ],
-      value: "tdxf",
+      tab: "tdxf",
       paramdatas: {},
-      sdata: {},
+      sdlist: {
+        tdxf: [
+          { name: "综合整治项目", prop: "xzqhdm_number", unit: "个" },
+          { name: "土地整治面积", prop: "zlmj", unit: "公顷" },
+          { name: "总投资", prop: "tzje", unit: "万元" },
+        ],
+        ssxf: [
+          { name: "山水项目", prop: "xzqhdm_number", unit: "个" },
+          { name: "整治面积", prop: "zlmj", unit: "公顷" },
+          { name: "总投资", prop: "tzje", unit: "万元" },
+        ],
+        haxf: [
+          { name: "海岸线长度", prop: "xzqhdm_number", unit: "千米" },
+          { name: "自然岸线保有率", prop: "zlmj", unit: "%" },
+          { name: "海岸线整治修复项目", prop: "tzje", unit: "个" },
+        ],
+      },
+      sdata: { tdxf: {}, ssxf: {}, haxf: {} },
       eData: {
         xData: ["农用地", "建设用地", "生态修复", "历史文化保护"],
         yData: [
           [10, 10, 10, 10],
           [10, 10, 30, 10],
-          [10, 10, 10, 40]
+          [10, 10, 10, 40],
         ],
-        legend: [""]
-      }
+        legend: [""],
+      },
     };
   },
   //监听属性 类似于data概念
@@ -83,16 +88,17 @@ export default {
     // //第二个图表
     setData(datas) {
       this.paramdatas = datas;
-      if (this.value == "ssxf") {
+      if (this.tab == "ssxf") {
         this.GetQueryOne(datas);
         this.GetQueryList(datas);
       } else {
-        this.sdata = { xzqhdm_number: "", zlmj: ",", tzje: "" };
+        this.sdata.tdxf = { xzqhdm_number: 100, zlmj: 0, tzje: 20 };
+        this.sdata.haxf = { xzqhdm_number: 40, zlmj: 30, tzje: 3 };
         this.eData.xData = ["农用地", "建设用地", "生态修复", "历史文化保护"];
         this.eData.yData = [
           [10, 10, 10, 10],
           [10, 10, 30, 10],
-          [10, 10, 10, 40]
+          [10, 10, 10, 40],
         ];
         this.$nextTick(() => {
           this.$refs.echartRef.setOptions(this.eData);
@@ -102,10 +108,10 @@ export default {
     GetQueryOne(datas) {
       let params = {
         ...datas,
-        jscType: `jsc_stxf_ztgh_${this.value}` //"jsc_stxf_ztgh_ssxf"
+        jscType: `jsc_stxf_ztgh_${this.tab}`, //"jsc_stxf_ztgh_ssxf"
       };
-      QueryOne(params).then(res => {
-        this.sdata = res.data || {};
+      QueryOne(params).then((res) => {
+        this.sdata[this.tab] = res.data || {};
       });
     },
     GetQueryList(datas) {
@@ -113,10 +119,10 @@ export default {
       this.eData.yData = [];
       let params = {
         ...datas,
-        jscType: `jsc_stxf_ywlx_${this.value}` // "jsc_stxf_ywlx_ssxf"
+        jscType: `jsc_stxf_ywlx_${this.tab}`, // "jsc_stxf_ywlx_ssxf"
       };
-      QueryList(params).then(res => {
-        res.data.forEach(edata => {
+      QueryList(params).then((res) => {
+        res.data.forEach((edata) => {
           this.eData.xData.push(edata.jd_type);
           this.eData.yData.push([edata.xzqhdm_number, edata.zlmj, edata.tzje]);
         });
@@ -124,9 +130,9 @@ export default {
           this.$refs.echartRef.setOptions(this.eData);
         });
       });
-    }
+    },
   },
-  mounted() {}
+  mounted() {},
 };
 </script>
 <style lang="scss" scoped>
@@ -141,7 +147,7 @@ export default {
 }
 
 .item {
-  width: 112px;
+  width: calc(100% / 3); //112px;
   height: 44px;
   position: relative;
   text-align: center;
@@ -150,6 +156,7 @@ export default {
     height: 34px;
     position: absolute;
     top: 10px;
+    left: 10px;
     background: no-repeat;
     background-image: url("/static/images/overview/Tab.png");
   }

src/views/viewer.vue

@@ -55,7 +55,7 @@ export default {
         },
         setDatas() {
             this.$refs.gdbh_ref.setData({ id: this.params.id });
-            this.$refs.gdbh_ref.setData({ id: this.params.id });
+            this.$refs.stxf_ref.setData({ id: this.params.id });
             this.$refs.wpjg_ref.setData(this.params);
         },
         dateChange(date) {