时间选择器功能联动

src/views/cockpitNew1/datePicker.vue

@@ -1,10 +1,11 @@
 <template>
+  <!-- value-format="yyyy-MM-dd" -->
   <el-date-picker
     v-model="dateValue"
     class="timePicker"
     type="daterange"
     :picker-options="pickerOptions"
-    value-format="yyyy-MM-dd"
+    value-format="yyyyMMdd"
     range-separator="-"
     start-placeholder="开始日期"
     end-placeholder="结束日期"
@@ -58,7 +59,8 @@ export default {
           },
         ],
       },
-      dateValue: [`${nowYear}-01-01`, `${nowYear}-${nowMonth}-${nowDay}`],
+      // dateValue: [`${nowYear}-01-01`, `${nowYear}-${nowMonth}-${nowDay}`]
+      dateValue: [`${nowYear}0101`, `${nowYear}${nowMonth}${nowDay}`]
     };
   },
   mounted() {
@@ -71,14 +73,13 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>
 <style lang="scss">
 // 日期按选择器样式修改
 .timePicker {
   position: absolute;
-  top: 10%;
-  left: 22%;
+  top: 40px; //top: 10%;
+  left: 23%;
   z-index: 100;
   font-size: 14px;
   padding: 0;

src/views/cockpitNew1/gdbh.vue

@@ -19,16 +19,17 @@
 import borderTemplate from "./borderTemplate.vue";
 import highPie from "../../components/echartsTemplate/highPie.vue";
 import pie3d from "../../components/echartsTemplate/3dPie.vue";
+import { QueryList } from "../../api/cockpitNew";
 export default {
   components: { borderTemplate, pie3d },
   data() {
     return {
       sdlist: [
-        { name: "高标准农田", value: "", unit: "km²" }, //耕地保有量
+        { name: "高标准农田", value: "", unit: "km²" }, //耕地保有量//url: "residentPopulation",
         { name: "补充耕地项目", value: "", unit: "个" },
         { name: "永久基本农田", value: "", unit: "km²" },
-        { name: "补充耕地面积", value: "", unit: "km²" },
-      ],
+        { name: "补充耕地面积", value: "", unit: "km²" }
+      ]
     };
   },
   //监听属性 类似于data概念
@@ -37,25 +38,41 @@ export default {
   watch: {},
   //方法集合
 
-  methods: {},
-  mounted() {
-    // let data = [
-    //   ["货1", 23],
-    //   ["客1", 18],
-    //   ["货2", 23],
-    //   ["客2", 18],
-    // ];
-    // 传入数据生成 option
-
-    const optionsData = [
-      { name: "水田", value: 50 },
-      { name: "水浇地", value: 20 },
-      { name: "旱地", value: 30 },
-    ];
-    this.$nextTick(() => {
-      this.$refs.echartRef.setOptions(optionsData);
-    });
+  methods: {
+    setData(datas) {
+      const optionsData = [
+        { name: "水田", value: 50 },
+        { name: "水浇地", value: 20 },
+        { name: "旱地", value: 30 }
+      ];
+      this.$nextTick(() => {
+        this.$refs.echartRef.setOptions(optionsData);
+      });
+      // this.GetQueryListztsh(datas)
+      // this.GetQueryListztsh(datas)
+    },
+    GetQueryListztsh(datas) {
+      let params = {
+        ...datas,
+        jscType: "jsc_wpjc_ztsh",
+        id: 46
+      };
+      QueryList(params).then(res => {
+        // this.sdata = res.data && res.data.length > 0 ? res.data[0] : {};
+      });
+    },
+    GetQueryListztsh(datas) {
+      let params = {
+        ...datas,
+        jscType: "jsc_wpjc_ztsh",
+        id: 46
+      };
+      QueryList(params).then(res => {
+        // this.sdata = res.data && res.data.length > 0 ? res.data[0] : {};
+      });
+    }
   },
+  mounted() {}
 };
 </script>
 <style lang="scss" scoped>
@@ -145,4 +162,4 @@ export default {
     top: 100px;
   }
 }
-</style>
+</style>

src/views/cockpitNew1/stxf.vue

@@ -31,12 +31,13 @@
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 import borderTemplate from "./borderTemplate.vue";
 import Bar3d from "../../components/echartsTemplate/3dBar.vue";
+import { QueryList } from "../../api/cockpitNew";
 
 export default {
   components: { borderTemplate, Bar3d },
   data() {
     return {
-      sdata: {},
+      sdata: {}
     };
   },
   //监听属性 类似于data概念
@@ -45,16 +46,16 @@ export default {
   watch: {},
   methods: {
     // //第二个图表
-    echarts2() {
+    setData(datas) {
       let v = {
         xData: ["农用地", "建设用地", "生态修复", "历史文化保护"],
         yData: [
           [10, 10, 10, 10],
           [10, 10, 30, 10],
-          [10, 10, 10, 40],
+          [10, 10, 10, 40]
         ],
 
-        legend: [""],
+        legend: [""]
       };
       this.$nextTick(() => {
         this.$refs.echartRef.setOptions(v);
@@ -62,12 +63,18 @@ export default {
       // let option = this.options3d(v);
       // myChart.setOption(option);
     },
+    GetQueryListztsh(datas) {
+      let params = {
+        ...datas,
+        jscType: "jsc_wpjc_ztsh",
+        id: 46
+      };
+      QueryList(params).then(res => {
+        // this.sdata = res.data && res.data.length > 0 ? res.data[0] : {};
+      });
+    }
   },
-  mounted() {
-    // this.getRenKou();
-
-    this.echarts2();
-  },
+  mounted() {}
 };
 </script>
 <style lang="scss" scoped>
@@ -114,4 +121,4 @@ export default {
   //   left: -28%;
   //   top: 7%;
 }
-</style>
+</style>

src/views/cockpitNew1/wpjg.vue

@@ -47,13 +47,16 @@ export default {
   watch: {},
 
   methods: {
-    getQueryListyelx() {
+    setData(datas){
+      this.GetQueryListztsh(datas);
+      this.getQueryListyelx(datas);
+    },
+    getQueryListyelx(datas) {
       let data = [];
       let links = [];
 
       let params = {
-        beginTime: 20230612,
-        endTime: 20230817,
+        ...datas,
         jscType: "jsc_wpjc_yelx",
         id: 46,
       };
@@ -76,11 +79,9 @@ export default {
         });
       });
     },
-    // /apply/jsc/QueryList?beginTime=20230612&endTime=20230817&jscType=&id=46
     GetQueryListztsh() {
       let params = {
-        beginTime: 20230612,
-        endTime: 20230817,
+        ...datas,
         jscType: "jsc_wpjc_ztsh",
         id: 46,
       };
@@ -90,8 +91,7 @@ export default {
     },
   },
   mounted() {
-    this.GetQueryListztsh();
-    this.getQueryListyelx();
+   
   },
 };
 </script>

src/views/viewer1.vue

@@ -1,14 +1,14 @@
 <template>
     <div v-show="flag">
-        <datePicker @deteChange="deteChange"></datePicker>
+        <datePicker @dateChange="dateChange"></datePicker>
         <ser-center></ser-center>
         <JSYD />
         <TDSC />
         <HYSY ref="hysy_ref" />
         <TDSY />
-        <GDBH />
-        <STXF />
-        <WPJG />
+        <GDBH ref="gdbh_ref"/>
+        <STXF ref="stxf_ref"/>
+        <WPJG ref="wpjg_ref"/>
     </div>
 </template>
 
@@ -49,7 +49,11 @@ export default {
             this.flag = !this.flag;
 
         },
-        deteChange(date) {
+        dateChange(date) {
+            let params = { beginTime: date[0], endTime: date[1] };
+            this.$refs.gdbh_ref.setData(params);
+            this.$refs.stxf_ref.setData(params);
+            this.$refs.wpjg_ref.setData(params);
 
         },
         async hysyq(address) {