驾驶舱的土地收储数据，项目类型和收储方式可以下拉进行筛选选择，

src/views/cockpit/common/VectorSpace/BoxCommonVector.vue

@@ -5,15 +5,40 @@
         <span class="pange_textVector">{{ title }}</span>
       </h2>
       <i class="el-icon-close" @click="close"></i>
-
       <el-input
+        v-if="word"
         clearable
         v-model="state"
         @input="change_witch"
         class="search"
         placeholder="请输入内容"
       ></el-input>
-
+      <div class="searchDiv" v-else>
+        <div class="sidiv" v-for="sitem in searchs" :key="sitem.key">
+          <el-input
+            v-if="sitem.type == 'input'"
+            clearable
+            v-model="searchform[sitem.key]"
+            @input="change_witch"
+            class="search"
+            :placeholder="`请输入${sitem.label}`"
+          ></el-input>
+          <el-select
+            v-else-if="sitem.type == 'select'"
+            clearable
+            v-model="searchform[sitem.key]"
+            :placeholder="`请选择${sitem.label}`"
+            @change="change_witch"
+          >
+            <el-option
+              v-for="item in sitem.options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </div>
+      </div>
       <el-table
         :row-class-name="tableRowClassName"
         ref="singleTable"
@@ -71,6 +96,8 @@ export default {
       layersData: {},
       scrollTop_index: null,
       tempdataLayerId: null,
+      searchs: [],
+      searchform: {},
     };
   },
   methods: {
@@ -361,7 +388,8 @@ export default {
       }, 6000);
     },
     change_witch() {
-      this.get_search(this.state);
+      if (this.word) this.get_searchWord(this.state);
+      else this.init_vector(this.searchform);
     },
     // get_search(word) {
     //     if (word.length == 0) {
@@ -380,15 +408,6 @@ export default {
     //             gy_ju.endTime = undefined
     //         }
 
-    //         // let bj_sl = {
-    //         //   beginTime: store.state.cockpit_date[0],
-    //         //   endTime: store.state.cockpit_date[1],
-    //         //   jscType: 'jsc_bjxm_csbj_zbmx_cx',
-    //         //   id: '4602',
-    //         //   val0: word,
-
-    //         // }
-
     //         Promise.all([QueryList(gy_ju)]).then((values) => {
     //             values[0].data.map((res) => {
     //                 if (res.geom) {
@@ -404,8 +423,8 @@ export default {
 
     // },
 
-    get_search(word) {
-      if (word.length == 0) {
+    get_searchWord() {
+      if (this.state.length == 0) {
         this.active_dableData = this.tableData;
         console.log("this.active_dableData: ", this.active_dableData);
       } else {
@@ -417,8 +436,8 @@ export default {
 
         this.active_dableData = this.tableData.filter((item) => {
           console.log("item: ", item);
-          if (item[this.word] && word) {
-            return item[this.word].indexOf(word) >= 0;
+          if (item[this.word] && this.state) {
+            return item[this.word].indexOf(this.state) >= 0;
           }
           return false;
         });
@@ -432,6 +451,7 @@ export default {
         beginTime: store.state.cockpit_date[0],
         endTime: store.state.cockpit_date[1],
         id: store.state.cockpit_region.id,
+        ...params
       };
       if (this.title == "土地供应完成项目" || this.title == "山水工程项目") {
         obj.beginTime = undefined;
@@ -490,6 +510,8 @@ export default {
     cockpit_vector(newVal, oldVal) {
       this.title = newVal.title;
       this.word = newVal.word;
+      this.searchs = newVal.searchs || [{ key: "a", label: newVal.word }];
+      this.searchform = newVal.searchform;
       this.state = "";
       if (newVal.tableData && newVal.tableData.length > 0) {
         this.active_dableData = []; //防止重复点击tableData不刷新
@@ -566,6 +588,19 @@ export default {
   background-image: url("/static/images/ghzc/内容框.png");
   background-size: 100% 100%;
   border-top-right-radius: 15px;
+  .searchDiv {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-right: 10px;
+    .sidiv {
+    //   min-width: calc(50% - 10px);
+      height: 40px;
+      margin-bottom: 5px;
+      margin-right: 5px;
+      display: inline-block;
+    }
+  }
 
   .search {
     // margin: 2rem;

src/views/cockpit/tdsc.vue

@@ -2,66 +2,96 @@
   <div class="tdsc">
     <Title :title="'土地收储'"></Title>
 
-
     <div class="selectTab">
-      <el-select v-model="tab" placeholder="请选择" :popper-append-to-body="false" @change="change_model">
-        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+      <el-select
+        v-model="tab"
+        placeholder="请选择"
+        :popper-append-to-body="false"
+        @change="change_model"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
         </el-option>
       </el-select>
     </div>
     <div v-show="tab == options[1].value">
       <!-- <BarGraph3D ref="tdsc_bar_graph" /> -->
       <div id="tdsc_jg_echart"></div>
-
     </div>
     <div v-show="tab == options[0].value">
-      <DialWatch :dial_watch_info="dial_watch_info" ref="tdsc_scjd" class="tdsc_scjd" @draw_vector="dra" />
+      <DialWatch
+        :dial_watch_info="dial_watch_info"
+        ref="tdsc_scjd"
+        class="tdsc_scjd"
+        @draw_vector="dra"
+      />
     </div>
   </div>
 </template>
 
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-import { QueryOne, QueryList } from '@/api/cockpitNew'
-import BarGraph3D from './common/BarGraph3D.vue';
-import DialWatch from './common/DialWatch.vue';
-import Title from './common/Title.vue';
+import { QueryOne, QueryList } from "@/api/cockpitNew";
+import BarGraph3D from "./common/BarGraph3D.vue";
+import DialWatch from "./common/DialWatch.vue";
+import Title from "./common/Title.vue";
 
 export default {
   components: { BarGraph3D, DialWatch, Title },
   data() {
     return {
-      tab: 'scjd',
+      tab: "scjd",
       flag: true,
       options: [
         { value: "scjd", label: "收储进度" },
         { value: "scjgg", label: "计划收储" },
       ],
-      legendData: ['计划收储', '完成收储'],
-      xdata: ['居民用地', '公共管理用地', '商业商服用地', '工矿用地', '工矿用地仓储用地', "交通运输用地"],
+      legendData: ["计划收储", "完成收储"],
+      xdata: [
+        "居民用地",
+        "公共管理用地",
+        "商业商服用地",
+        "工矿用地",
+        "工矿用地仓储用地",
+        "交通运输用地",
+      ],
       result: [
-        { name: '计划收储', data: [...new Array(5)].map((item, i) => +(Math.random(0, 10) * 1000).toFixed(0)) },
-        { name: '完成收储', data: [...new Array(5)].map((item, i) => +(Math.random(0, 0.5) * 1000).toFixed(0)) },
+        {
+          name: "计划收储",
+          data: [...new Array(5)].map(
+            (item, i) => +(Math.random(0, 10) * 1000).toFixed(0)
+          ),
+        },
+        {
+          name: "完成收储",
+          data: [...new Array(5)].map(
+            (item, i) => +(Math.random(0, 0.5) * 1000).toFixed(0)
+          ),
+        },
       ],
       dial_watch_info: {
         echart_data: 0,
         lt: {
-          key: '计划收储',
+          key: "计划收储",
           value: 0,
           unit: "公顷",
-
-        }, lb: {
+        },
+        lb: {
           key: "完成收储",
           value: 0,
           unit: "公顷",
-
-        }, rt: {
+        },
+        rt: {
           key: "计划收储项目",
           value: 0,
           unit: "个",
           viewer: true,
-
-        }, rb: {
+        },
+        rb: {
           key: "完成收储项目",
           value: 0,
           unit: "个",
@@ -74,24 +104,23 @@ export default {
   //监控data中的数据变化
   watch: {},
   //方法集合
-  beforeCreate() { }, //生命周期 - 创建之前
-  created() {
-  }, //生命周期 - 创建完成（可以访问当前this实例）
-  beforeMount() { }, //生命周期 - 挂载之前
+  beforeCreate() {}, //生命周期 - 创建之前
+  created() {}, //生命周期 - 创建完成（可以访问当前this实例）
+  beforeMount() {}, //生命周期 - 挂载之前
   methods: {
     init_tu_gy_echart(xdata, result) {
       var dom = document.getElementById("tdsc_jg_echart");
       var myChart = window.echarts.init(dom);
 
       var option = {
-        backgroundColor: 'rgba(0,0,0,0)',
+        backgroundColor: "rgba(0,0,0,0)",
         tooltip: {
-          backgroundColor: 'RGBA(20, 106, 178, 0.4)',
+          backgroundColor: "RGBA(20, 106, 178, 0.4)",
           trigger: "axis",
           textStyle: {
             fontSize: 14,
-            color: '#fff'
-          }
+            color: "#fff",
+          },
           // formatter: params => {
           //   console.log('params: ', params);
           //   let rander = params.map(item =>
@@ -109,22 +138,22 @@ export default {
           // }
         },
         grid: {
-          left: '2%',
-          right: '4%',
-          bottom: '15%',
-          top: '20%',
-          containLabel: true
+          left: "2%",
+          right: "4%",
+          bottom: "15%",
+          top: "20%",
+          containLabel: true,
         },
         legend: {
-          data: ['收储面积', '收储个数'],
-          left: '7%',
-          top: '5%',
+          data: ["收储面积", "收储个数"],
+          left: "7%",
+          top: "5%",
           textStyle: {
-            color: "#666666"
+            color: "#666666",
           },
           itemWidth: 15,
           itemHeight: 10,
-          itemGap: 25
+          itemGap: 25,
         },
         xAxis: {
           axisTick: { show: false },
@@ -145,104 +174,110 @@ export default {
           },
           data: xdata,
         },
-        yAxis: [{
-          type: 'value',
-          splitLine: {
-            show: false,
-            lineStyle: {
-              color: 'rgba(163, 163, 163, 0.5)',
-              type: 'dashed'
-            }
+        yAxis: [
+          {
+            type: "value",
+            splitLine: {
+              show: false,
+              lineStyle: {
+                color: "rgba(163, 163, 163, 0.5)",
+                type: "dashed",
+              },
+            },
+            axisLabel: {
+              color: "#A0A4AA",
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "rgba(65, 97, 128, 0.5)",
+              },
+            },
           },
-          axisLabel: {
-            color: '#A0A4AA'
+          {
+            type: "value",
+            name: "",
+            nameTextStyle: {
+              color: "#666666",
+            },
+            position: "right",
+            axisLine: {
+              lineStyle: {
+                color: "#cdd5e2",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+              formatter: "{value} %", //右侧Y轴文字显示
+              textStyle: {
+                color: "#666666",
+              },
+            },
           },
-          axisLine: {
+        ],
+        dataZoom: [
+          {
             show: true,
-            lineStyle: {
-              color: 'rgba(65, 97, 128, 0.5)',
+            height: 12,
+            xAxisIndex: [0],
+            top: "88%",
+            start: 0,
+            end: 40,
+            handleIcon:
+              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
+            handleSize: "110%",
+            handleStyle: {
+              color: "#d3dee5",
             },
-          },
-        },
-        {
-          type: "value",
-          name: "",
-          nameTextStyle: {
-            color: "#666666"
-          },
-          position: "right",
-          axisLine: {
-            lineStyle: {
-              color: '#cdd5e2'
-            }
-          },
-          splitLine: {
-            show: false,
-          },
-          axisLabel: {
-            show: false,
-            formatter: "{value} %", //右侧Y轴文字显示
             textStyle: {
-              color: "#666666"
-            }
-          }
-        }
-        ],
-        dataZoom: [{
-          "show": true,
-          "height": 12,
-          "xAxisIndex": [
-            0
-          ],
-          top: '88%',
-          "start": 0,
-          "end": 40,
-          handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
-          handleSize: '110%',
-          handleStyle: {
-            color: "#d3dee5",
-
+              color: "#333",
+            },
+            borderColor: "#90979c",
           },
-          textStyle: {
-            color: "#333"
+          {
+            type: "inside",
+            show: true,
+            height: 15,
+            start: 1,
+            end: 35,
           },
-          borderColor: "#90979c"
-        }, {
-          "type": "inside",
-          "show": true,
-          "height": 15,
-          "start": 1,
-          "end": 35
-        }],
-        series: [{
-          name: '收储面积',
-          type: 'bar',
-          barWidth: '12px',
-          itemStyle: {
-            normal: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: '#12BDDF'
-              }, {
-                offset: 1,
-                color: 'rgba(24, 253, 255, 0)'
-              }]),
+        ],
+        series: [
+          {
+            name: "收储面积",
+            type: "bar",
+            barWidth: "12px",
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "#12BDDF",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(24, 253, 255, 0)",
+                  },
+                ]),
+              },
             },
+            data: result[1].data,
           },
-          data: result[1].data
-        }
-          , {
-          name: "收储个数",
-          type: 'line',
-          smooth: true,
-          itemStyle: {
-            normal: {
-              color: '#FFCC64'  // 折线的颜色
-            }
+          {
+            name: "收储个数",
+            type: "line",
+            smooth: true,
+            itemStyle: {
+              normal: {
+                color: "#FFCC64", // 折线的颜色
+              },
+            },
+            data: result[0].data,
           },
-          data: result[0].data
-        }
-        ]
+        ],
       };
       myChart.setOption(option);
     },
@@ -278,9 +313,30 @@ export default {
       store.setXzqh_flag(false);
       store.setCockpit_vector({
         title: "土地收储计划项目",
-        word: "收储项目名称",
+        searchs: [
+          { type: "input", label: "收储项目名称", key: "val0" },
+          {
+            type: "select",
+            label: "项目类型",
+            key: "val1",
+            options: [
+              { value: "0", label: " 新增" },
+              { value: "1", label: " 年度转存" },
+            ],
+          },
+          {
+            type: "select",
+            label: "收储方式",
+            key: "val2",
+            options: [
+              { value: "征收", label: " 征收" },
+              { value: "收回", label: " 收回" },
+            ],
+          },
+        ],
+        searchform: { val0: "", val1: "", val2: "" },
         tableData: [],
-        tablejscType: 'jsc_tdsc_zbmx',
+        tablejscType: "jsc_tdsc_zbmx",
         columns: [
           "序号",
           "项目类型",
@@ -301,43 +357,43 @@ export default {
       let obj = {
         // beginTime: params ? params.beginTime : store.state.cockpit_date[0],
         // endTime: params ? params.endTime : store.state.cockpit_date[1],
-        jscType: 'jsc_tdsc_ztgh',
-        id: params ? params.id : '4602'
+        jscType: "jsc_tdsc_ztgh",
+        id: params ? params.id : "4602",
       };
       let data = await QueryOne(obj);
       let proData = {
         lt: {
-          key: '计划收储',
+          key: "计划收储",
           value: data.data.jh_mj,
           unit: "公顷",
-
-        }, lb: {
+        },
+        lb: {
           key: "完成收储",
           value: data.data.sj_mj,
           unit: "公顷",
-
-        }, rt: {
+        },
+        rt: {
           key: "计划收储项目",
           value: data.data.jh_xzqdm_number,
           unit: "个",
           viewer: true,
-
-        }, rb: {
+        },
+        rb: {
           key: "完成收储项目",
           value: data.data.sj_xzqdm_number,
           unit: "个",
         },
-      }
+      };
       that.dial_watch_info = proData;
       let echart_data = 0;
-      if (data.data.sj_mj == '暂无') {
-        echart_data = '0'
+      if (data.data.sj_mj == "暂无") {
+        echart_data = "0";
       } else if (data.data.jh_mj == 0 && data.data.sj_mj > 0) {
-        echart_data = 100
+        echart_data = 100;
       } else {
-        echart_data = (data.data.sj_mj / data.data.jh_mj * 100).toFixed(2)
+        echart_data = ((data.data.sj_mj / data.data.jh_mj) * 100).toFixed(2);
       }
-      echart_data += '%'
+      echart_data += "%";
       // that.$refs.tdgy_gyjd.init_dial_watch(echart_data);
 
       that.$refs.tdsc_scjd.init_dial_watch(echart_data);
@@ -350,15 +406,14 @@ export default {
       // this.init_tdsc_jg();
 
       // this.$refs.tdsc_bar_graph.setOptions(this.legendData, this.xdata, this.result);
-
-    })
+    });
   },
-  beforeUpdate() { }, //生命周期 - 更新之前
-  updated() { }, //生命周期 - 更新之后
-  beforeDestroy() { }, //生命周期 - 销毁之前
-  destroy() { },//生命周期 - 销毁完成
-  activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
-  deactivated() { } //若组件实例是 <Keee> 缓存树的一部分，当组件从 DOM 中被移除时调用。
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroy() {}, //生命周期 - 销毁完成
+  activated() {}, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
+  deactivated() {}, //若组件实例是 <Keee> 缓存树的一部分，当组件从 DOM 中被移除时调用。
 };
 </script>
 <style  lang="scss"  scoped>
@@ -374,7 +429,6 @@ export default {
   -webkit-box-shadow: none;
   box-shadow: none;
   z-index: 100;
-
 }
 
 .title {
@@ -390,7 +444,6 @@ export default {
   background-image: url("/static/images/overview/titlebox.gif");
   position: relative;
 
-
   span {
     color: #fff;
     font-size: 14px;
@@ -401,7 +454,6 @@ export default {
   }
 }
 
-
 .selectTab {
   position: absolute;
   right: 1rem;
@@ -432,12 +484,17 @@ export default {
 
   /deep/ .el-select-dropdown__list {
     color: #bcd3e5 !important;
-    background: linear-gradient(180deg,
-        rgba(3, 115, 177, 0) 11%,
-        rgba(3, 115, 177, 0.48) 100%);
-    border-image: linear-gradient(360deg,
+    background: linear-gradient(
+      180deg,
+      rgba(3, 115, 177, 0) 11%,
+      rgba(3, 115, 177, 0.48) 100%
+    );
+    border-image: linear-gradient(
+        360deg,
         rgba(75, 185, 250, 0.2),
-        rgba(75, 185, 250, 0.05)) 1 1 !important;
+        rgba(75, 185, 250, 0.05)
+      )
+      1 1 !important;
     border: none;
   }
 
@@ -471,7 +528,6 @@ export default {
   top: 0;
 }
 
-
 #scje_echart {
   z-index: -1;
   left: -2rem;