menusCard组件支持年份、类型、街道动态echart解析、TOP模块解析。

src/components/common/TopCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="CardBox">
-    <div v-for="(items, index) in dataList" :key="index" class="Top_box">
+    <div v-for="(items, index) in dataList" :key="index" class="Top_box" v-show="dataList.length > 0">
       <div class="Top_box_name">{{ "TOP" + (index + 1) }}</div>
       <div class="Top_box_main">
         <div class="Top_box_main_title">{{ items[columnName] }}</div>
@@ -8,6 +8,7 @@
       </div>
       <div class="Top_box_value">{{ items.number }}</div>
     </div>
+    <el-empty v-show="dataList.length === 0" description="暂无数据"></el-empty>
   </div>
 </template>
 

src/components/layout/MenuCard.vue

@@ -320,8 +320,10 @@ export default {
             this.dataInitLoading = false;
           }
         );
+      } else if (this.menuData.commonName && this.menuData.commonName === "TOP") {
+        this.topData(this.$store.state.homeSpecialTown);
       } else if (this.menuData.commonName && this.menuData.commonName === "SUM") {
-        this.sumData();
+        this.sumData(this.$store.state.homeSpecialTown);
       }
       // 只有第一次创建该页面，或刷新页面时。
       if (this.menuData.menuIndex) {
@@ -380,60 +382,131 @@ export default {
    */
   props: ["menuData"],
   methods: {
-    sumData() {
-      this.dataInitLoading = true;
-      if (this.menuData.paramJson) {
-        if (this.menuData.categoryData) {
-          this.menuData.topSolt.commonData[0].categoryData = [];
-          this.menuData.topSolt.commonData[0].valueData = [];
-          this.menuData.categoryData.forEach((item, _index) => {
-            let params = new FormData();
-            params.append("columnId", this.menuData.columnId);
-            if (this.menuData.field) {
-              params.append("field", this.menuData.field);
-            }
-            params.append("states", "2,3");
-            params.append("pageSize", this.menuData.pageSize ? this.menuData.pageSize : 999);
-            params.append("page", 0);
-            let pramJson = {};
-            pramJson.c_new_date = item;
-            pramJson.sj_select = this.menuData.paramJson.sj_select;
-            params.append("paramJson", JSON.stringify(pramJson));
-            if (this.menuData.sortField) {
-              let sortparam = [
-                {
-                  field: this.menuData.sortField.field,
-                  orderByType: this.menuData.sortField.orderByType
+    sumData(homeSpecialTown) {
+      if (this.menuData.paramJson && this.menuData.categoryData) {
+        this.resData = [];
+        this.dataInitLoading = true;
+        this.menuData.topSolt.commonData[0].categoryData = [];
+        this.menuData.topSolt.commonData[0].valueData = [];
+        let _categoryData = this.menuData.categoryData;
+        let _valueData = [];
+        this.menuData.categoryData.forEach(item => {
+          _valueData.push(0);
+        });
+
+        this.menuData.categoryData.forEach((item, _index) => {
+          let params = new FormData();
+          params.append("columnId", this.menuData.columnId);
+          if (this.menuData.field) {
+            params.append("field", this.menuData.field);
+          }
+          params.append("states", "2,3");
+          params.append("pageSize", this.menuData.pageSize ? this.menuData.pageSize : 999);
+          params.append("page", 0);
+          let pramJson = {};
+          pramJson.c_new_date = item;
+          pramJson.sj_select = this.menuData.paramJson.sj_select;
+          if (homeSpecialTown !== "全部") {
+            let associatedItems = this.$store.state.selectSelectDataMap.associatedItems;
+            if (associatedItems.length > 0) {
+              associatedItems.forEach(item => {
+                if (item.name === homeSpecialTown) {
+                  pramJson.bsjz = item.index + "";
                 }
-              ];
-              params.append("orderBy", JSON.stringify(sortparam));
+              });
             }
-            this.$Post(this.menuData.getUrl ? this.menuData.getUrl : this.urlsCollection.selectContentList, params).then(
-              res => {
-                if (res.code === 200 && res.content !== "数据为空" && res.content.length > 0) {
-                  this.menuData.topSolt.commonData[0].categoryData[_index] = Number(item);
-                  let sumField = 0;
-                  res.content.forEach(contentItem => {
-                    sumField += Number(contentItem.number);
-                  });
-                  this.menuData.topSolt.commonData[0].valueData[_index] = sumField;
-                } else {
-                  this.menuData.topSolt.commonData[0].categoryData[_index] = Number(item);
-                  this.menuData.topSolt.commonData[0].valueData[_index] = 0;
-                }
-                this.dataInitLoading = false;
-              },
-              error => {
-                this.menuData.topSolt.commonData[0].categoryData[_index] = item;
-                this.menuData.topSolt.commonData[0].valueData[_index] = 0;
-                console.log("error:", error, this.menuData);
-                this.dataInitLoading = false;
+          }
+          params.append("paramJson", JSON.stringify(pramJson));
+          if (this.menuData.sortField) {
+            let sortparam = [
+              {
+                field: this.menuData.sortField.field,
+                orderByType: this.menuData.sortField.orderByType
               }
-            );
-          });
-          console.log(this.menuData.topSolt.commonData[0].categoryData, this.menuData.topSolt.commonData[0].valueData);
+            ];
+            params.append("orderBy", JSON.stringify(sortparam));
+          }
+          this.$Post(this.menuData.getUrl ? this.menuData.getUrl : this.urlsCollection.selectContentList, params).then(
+            res => {
+              let sumField = 0;
+              if (res.code === 200 && res.content !== "数据为空" && res.content.length > 0) {
+                res.content.forEach(contentItem => {
+                  sumField += Number(contentItem.number);
+                });
+              }
+              _valueData[Number(_index)] = sumField;
+
+              this.menuData.topSolt.commonData[0].categoryData = _categoryData;
+              this.menuData.topSolt.commonData[0].valueData = _valueData;
+              this.menuData.topSolt.commonData[0].value = _valueData[_valueData.length - 1];
+              this.dataInitLoading = false;
+            },
+            error => {
+              console.log("error:", error, this.menuData);
+            }
+          );
+        });
+      }
+    },
+    topData(homeSpecialTown) {
+      this.dataInitLoading = true;
+      let params = new FormData();
+      params.append("columnId", this.menuData.columnId);
+      if (this.menuData.field) {
+        params.append("field", this.menuData.field);
+      }
+      params.append("states", "2,3");
+      params.append("pageSize", this.menuData.pageSize ? this.menuData.pageSize : 999);
+      params.append("page", 0);
+      if (this.menuData.paramJson) {
+        let pramJson = {};
+        if (this.menuData.paramJson.sj_select) {
+          pramJson.sj_select = this.menuData.paramJson.sj_select;
+        }
+        if (homeSpecialTown !== "全部") {
+          let associatedItems = this.$store.state.selectSelectDataMap.associatedItems;
+          if (associatedItems.length > 0) {
+            associatedItems.forEach(item => {
+              if (item.name === homeSpecialTown) {
+                pramJson.bsjz = item.index + "";
+              }
+            });
+          }
         }
+        params.append("paramJson", JSON.stringify(pramJson));
       }
+      if (this.menuData.sortField) {
+        let sortparam = [
+          {
+            field: this.menuData.sortField.field,
+            orderByType: this.menuData.sortField.orderByType
+          }
+        ];
+        params.append("orderBy", JSON.stringify(sortparam));
+      }
+      this.$Post(this.menuData.getUrl ? this.menuData.getUrl : this.urlsCollection.selectContentList, params).then(
+        res => {
+          this.resData = [];
+          if (res.code === 200 && res.content.length > 0) {
+            res.content.forEach((item, index) => {
+              if (this.menuData.dataSize > index) {
+                this.resData.push(item);
+              }
+            });
+            this.menuData.topData = this.resData;
+          } else {
+            this.resData = [];
+            this.menuData.topData = this.resData;
+          }
+          this.dataInitLoading = false;
+        },
+        error => {
+          this.resData = [];
+          this.menuData.topData = this.resData;
+          console.log("error:", error, this.menuData);
+          this.dataInitLoading = false;
+        }
+      );
     },
     // 切换街镇时
     changeHomeSpecialTown() {
@@ -462,11 +535,9 @@ export default {
           }
         }
       } else if (this.menuData && this.menuData.commonName && this.menuData.commonName === "TOP") {
-        this.menuData.topData = this.resData;
+        this.topData(this.$store.state.homeSpecialTown);
       } else if (this.menuData && this.menuData.commonName && this.menuData.commonName === "SUM") {
-        console.log("changeHomeSpecialTown");
-        // this.sumData(this.$store.state.homeSpecialTown);
-        this.sumData();
+        this.sumData(this.$store.state.homeSpecialTown);
       } else if (this.menuData && this.menuData.topSolt && this.menuData.topSolt.commonData) {
         this.menuData.topSolt.commonData.forEach((item, index) => {
           this.menuData.topSolt.commonData[index].categoryData = [];
@@ -566,7 +637,6 @@ export default {
       }
     },
     windowOnresize(windowClient) {
-      // console.log("windowOnresize", windowClient);
       try {
         if (
           windowClient.windowsWidth != undefined &&

src/config/common.js

@@ -1042,6 +1042,7 @@ export const menuOnLine = {
         pageSize: 5,
         field: "c_wtfl",
         dataType: "all",
+        paramJson: {},
         dataSize: 5,
         topData: [
           {
@@ -1101,14 +1102,9 @@ export const menuOnLine = {
             {
               type: "lr",
               title: "土地类疑点",
-              value: 0,
               unit: "个",
-              categoryData: [
-                '2019', '2020', '2021'
-              ],
-              valueData: [
-                0, 0, 0
-              ]
+              categoryData: [],
+              valueData: []
             }
           ]
         },
@@ -1166,10 +1162,8 @@ export const menuOnLine = {
               type: "lr",
               title: "水资源类疑点",
               unit: "个",
-              categoryData: [
-              ],
-              valueData: [
-              ]
+              categoryData: [],
+              valueData: []
             }
           ]
         },
@@ -1227,10 +1221,8 @@ export const menuOnLine = {
               type: "lr",
               title: "林地类疑点",
               unit: "个",
-              categoryData: [
-              ],
-              valueData: [
-              ]
+              categoryData: [],
+              valueData: []
             }
           ]
         },

src/store/index.js

@@ -45,7 +45,9 @@ export default new Vuex.Store({
     // 综合分析修改标记弹窗
     updateCasePopupShow:false,
     // 首页所属街道全局暂存变量
-    homeSpecialTown: "全部"
+    homeSpecialTown: "全部",
+    // 全局类型变量
+    selectSelectDataMap: {}
   },
   getters: {
     customModelsArr: (state) => state.customModelsArr,

src/views/HomeView.vue

@@ -14,7 +14,7 @@
     </div>
 
     <!-- 镇域专题 -->
-    <div id="TownContainer" v-if="$ifMenu('2', '5')">
+    <div id="TownContainer" v-show="$ifMenu('2', '5')">
       <Legend
         id="TownContainer_bottomLegend"
         :legendData="{
@@ -289,14 +289,20 @@ export default {
       }
     };
   },
+  mounted() {
+    // 首先获取数据字典中的下拉框数据
+    this.selectSelectData("0", "浦东新区行政区划", "associatedItems");
+  },
   methods: {
     initMenu(menus) {
-      // if (menus) {
-      //   this.menus = menus;
-      //   this.getSourcesData();
-      // }
-      this.menus = menuOnLine;
-      this.getSourcesData();
+      if (menus) {
+        this.menus = menus;
+        setTimeout(() => {
+          this.getSourcesData();
+        },300);
+      }
+      // this.menus = menuOnLine;
+      // this.getSourcesData();
     },
     navSelect: function (data) {
       this.$store.commit("changeNavSelect", data);
@@ -326,6 +332,23 @@ export default {
           break;
       }
     },
+    // 数据字典查询
+    selectSelectData(type, cName, keyName) {
+      let params = new FormData();
+      params.append("type", type);
+      params.append("cName", cName);
+      this.$Post(this.urlsCollection.selectByCNameAType, params).then(
+        res => {
+          if (res.code === 200 && res.content.length > 0) {
+            this.$store.state.selectSelectDataMap[keyName] = res.content;
+          }
+        },
+        error => {
+          this.$message.error(error);
+          console.log(error);
+        }
+      );
+    },
     // home页面下拉框
     homeSelect(val) {
       this.$store.commit("changeHomeSpecialTown", val);