fix: 自动化添加部分全局组件

src/components/statusControl/index.vue → src/components/common/components/statusControl/StatusControl.vue

@@ -25,37 +25,37 @@
 <script>
 // #144683
 export default {
-  name: 'statusControl',
+  name: "statusControl",
   props: {
     list: {
       type: Array,
       default: function () {
-        return []
-      }
+        return [];
+      },
     },
     statusStyle: {
       type: [Object, String],
-      default: ''
+      default: "",
     },
     value: {
       type: Object,
       default: function () {
-        return {}
-      }
-    }
+        return {};
+      },
+    },
   },
   data() {
     return {
-      isShow: false
-    }
+      isShow: false,
+    };
   },
   methods: {
     onStatusChange(item) {
-      this.$emit('input', item)
-      this.isShow = false
-    }
-  }
-}
+      this.$emit("input", item);
+      this.isShow = false;
+    },
+  },
+};
 </script>
 
 <style scoped lang="less">

src/components/common/index.js

+import Vue from "vue";
+/*
+ * 1. 引入各个模块下公用组件
+ * 2. 各个模块下vue文件名为命名空间,
+ * 3. 在组件中使用公用组件：StatusControl.vue => <StatusControl></StatusControl> 建议全部大驼峰
+ * */
+// const commonComponents = {};
+const moduleContext = require.context("./components/", true, /\.vue$/);
+moduleContext.keys().forEach((key) => {
+  const name = key.split("/").pop().replace(".vue", "");
+  Vue.component(
+    name.slice(0, 1).toUpperCase() + name.slice(1),
+    moduleContext(key).default
+  );
+});
+
+// export default {
+//   install() {
+
+//   },
+// };

src/main.js

@@ -4,6 +4,7 @@ import router from "./router";
 import store from "./store";
 import mapboxgl from "mapbox-gl";
 import apis from "./api/index";
+import "./components/common/index.js";
 
 import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";

src/pages/biomassEnergyWarm/components/leftPart.vue

@@ -26,7 +26,6 @@
 </template>
 
 <script>
-import PartWrap from "@/components/PartWrap/PartWrap.vue";
 import { BiomassData } from "../config/biomass.config.js";
 export default {
   name: "leftPart",
@@ -42,9 +41,7 @@ export default {
       data: [],
     };
   },
-  components: {
-    PartWrap,
-  },
+  components: {},
   created() {
     this.getEnergyWarm();
   },

src/pages/biomassEnergyWarm/components/sortList.vue

@@ -20,7 +20,6 @@
 </template>
 
 <script>
-import PartWrap from "@/components/PartWrap/PartWrap.vue";
 import Echart from "@/components/Echart/Echarts.vue";
 import { BiomassData } from "../config/biomass.config.js";
 export default {
@@ -38,7 +37,6 @@ export default {
     };
   },
   components: {
-    PartWrap,
     Echart,
   },
   computed: {

src/pages/biomassEnergyWarm/components/table.vue

@@ -30,7 +30,6 @@
 </template>
 
 <script>
-import PartWrap from "@/components/PartWrap/PartWrap.vue";
 import { BiomassData } from "../config/biomass.config.js";
 export default {
   name: "biogasTable",
@@ -44,9 +43,7 @@ export default {
       default: () => [],
     },
   },
-  components: {
-    PartWrap,
-  },
+  components: {},
   data() {
     return {};
   },

src/pages/biomassEnergyWarm/index.vue

@@ -44,93 +44,89 @@
 </template>
 
 <script>
-import PartWrap from '@/components/PartWrap/PartWrap.vue'
-import Echart from '@/components/Echart/Echarts.vue'
-import StatusControl from '@/components/statusControl/index.vue'
-import Legend from '@/components/Lengend/Lengend.vue'
-import { getCodeOfName } from '@/config/city.config'
-import BiogasManureMap from './components/biogasManureMap.vue'
-import LeftPart from './components/leftPart.vue'
-import SortList from './components/sortList.vue'
-import Table from './components/table.vue'
-import { BiomassData } from './config/biomass.config.js'
-import { color, colorLabel } from './config/legend.config'
-import { mapGetters } from 'vuex'
+import Echart from "@/components/Echart/Echarts.vue";
+import Legend from "@/components/Lengend/Lengend.vue";
+import { getCodeOfName } from "@/config/city.config";
+import BiogasManureMap from "./components/biogasManureMap.vue";
+import LeftPart from "./components/leftPart.vue";
+import SortList from "./components/sortList.vue";
+import Table from "./components/table.vue";
+import { BiomassData } from "./config/biomass.config.js";
+import { color, colorLabel } from "./config/legend.config";
+import { mapGetters } from "vuex";
 export default {
-  name: 'BiomassEnergyWarm',
+  name: "BiomassEnergyWarm",
   data() {
     return {
       statusControlList: [
-        { key: 'gn', value: '打捆直燃集中供暖' },
-        { key: 'ghcx', value: '固化成型' },
-        { key: 'rj', value: '热解气化' },
-        { key: 'th', value: '碳化' }
+        { key: "gn", value: "打捆直燃集中供暖" },
+        { key: "ghcx", value: "固化成型" },
+        { key: "rj", value: "热解气化" },
+        { key: "th", value: "碳化" },
       ],
-      statusValue: { key: 'gn', value: '打捆直燃集中供暖' },
-      dataSetCode: 'ra_energy_heating',
+      statusValue: { key: "gn", value: "打捆直燃集中供暖" },
+      dataSetCode: "ra_energy_heating",
       data: [],
       color,
       colorLabel,
-      provinceCode: '',
-      allItemValue: { key: 'gn_local', value: '数量（处）' }
-    }
+      provinceCode: "",
+      allItemValue: { key: "gn_local", value: "数量（处）" },
+    };
   },
   components: {
-    PartWrap,
     Echart,
     BiogasManureMap,
     LeftPart,
-    StatusControl,
     SortList,
     Table,
-    Legend
+    Legend,
   },
   computed: {
     getItemOfType() {
       return BiomassData[this.statusValue.key].find(
-        item => item.type === 'aggregation'
-      )
+        (item) => item.type === "aggregation"
+      );
     },
     getAllItemOfType() {
-      return BiomassData[this.statusValue.key]
+      return BiomassData[this.statusValue.key];
     },
     getValOfdata() {
       const res = {
-        [this.getItemOfType.key]: []
-      }
+        [this.getItemOfType.key]: [],
+      };
 
-      this.data.forEach(item => {
+      this.data.forEach((item) => {
         res[this.getItemOfType.key].push({
           xAxis: item.properties.pname,
-          yAxis: item.properties[this.getItemOfType.key]
-        })
-      })
-      return res
+          yAxis: item.properties[this.getItemOfType.key],
+        });
+      });
+      return res;
     },
     setOptionOfEchart() {
       return function (type) {
         const data = this.getValOfdata[type]
-          .filter(item => item.yAxis)
-          .sort((a, b) => b.yAxis - a.yAxis)
-        const xData = data.map(item => item.xAxis)
-        const yData = data.map(item => item.yAxis)
+          .filter((item) => item.yAxis)
+          .sort((a, b) => b.yAxis - a.yAxis);
+        const xData = data.map((item) => item.xAxis);
+        const yData = data.map((item) => item.yAxis);
         const option = {
           title: {},
-          color: ['#d65108'],
+          color: ["#d65108"],
           tooltip: {
             show: true,
-            trigger: 'axis'
+            trigger: "axis",
           },
           grid: {
-            left: '3%',
-            right: '3%',
-            top: '10%',
-            bottom: '3%',
-            containLabel: true
+            left: "3%",
+            right: "3%",
+            top: "10%",
+            bottom: "3%",
+            containLabel: true,
           },
           yAxis: [
             {
-              type: 'value',
+              type: "value",
               // splitLine: {
               //   lineStyle: {
               //     color: "rgba(255,255,255,.15)",
@@ -138,102 +134,102 @@ export default {
               // },
               axisLine: {
                 lineStyle: {
-                  color: '#fff'
-                }
-              }
-            }
+                  color: "#fff",
+                },
+              },
+            },
           ],
           xAxis: [
             {
-              position: 'bottom',
-              type: 'category',
+              position: "bottom",
+              type: "category",
               data: xData,
               axisTick: {
-                show: false
+                show: false,
               },
               axisLine: {
-                show: false
+                show: false,
               },
               axisLabel: {
-                color: '#fff'
-              }
-            }
+                color: "#fff",
+              },
+            },
           ],
           series: [
             {
-              name: '',
-              type: 'bar',
+              name: "",
+              type: "bar",
               barWidth: `50%`,
               data: yData,
               label: {
                 show: true,
-                position: 'top'
+                position: "top",
               },
               itemStyle: {
-                color: '#d8ee2c'
+                color: "#d8ee2c",
                 // emphasis: {
                 //   color: "rgba(201,59,60)",
                 // },
-              }
-            }
-          ]
-        }
-        return option
-      }
+              },
+            },
+          ],
+        };
+        return option;
+      };
     },
     // 获取所有值
     getRandomLabel() {
       const obj = BiomassData[this.statusValue.key].find(
-        item => item.key === this.allItemValue.key
-      )
-      const res = []
-      this.data.forEach(item => {
-        res.push(item.properties[obj.key])
-      })
-      return [...new Set(res)].filter(item => item).sort((a, b) => a - b)
+        (item) => item.key === this.allItemValue.key
+      );
+      const res = [];
+      this.data.forEach((item) => {
+        res.push(item.properties[obj.key]);
+      });
+      return [...new Set(res)].filter((item) => item).sort((a, b) => a - b);
     },
     // 根据值生产颜色段
     getRandomColorLabel() {
-      const labels = this.getRandomLabel
-      const min = labels[0]
-      const max = labels[labels.length - 1]
-      const colorLabels = []
-      const part = (max - min) / 4
+      const labels = this.getRandomLabel;
+      const min = labels[0];
+      const max = labels[labels.length - 1];
+      const colorLabels = [];
+      const part = (max - min) / 4;
       for (let i = 1; i <= 4; i++) {
-        colorLabels.push(Number((part * i - 1).toFixed(4)))
+        colorLabels.push(Number((part * i - 1).toFixed(4)));
       }
-      return colorLabels
+      return colorLabels;
     },
-    ...mapGetters(['getMsgOfProvince'])
+    ...mapGetters(["getMsgOfProvince"]),
   },
   created() {
-    this.getEnergyWarm()
+    this.getEnergyWarm();
   },
   methods: {
     getEnergyWarm() {
       const param = {
-        filter: ['!=', 'pcode', 10]
-      }
-      this.$api.layer.query(this.dataSetCode, param).then(res => {
-        this.data = res.data.features
-        this.getValOfdata
-      })
+        filter: ["!=", "pcode", 10],
+      };
+      this.$api.layer.query(this.dataSetCode, param).then((res) => {
+        this.data = res.data.features;
+        this.getValOfdata;
+      });
     },
     barClick(name) {
-      console.log(name)
-      const code = getCodeOfName(name.name)
-      code && (this.provinceCode = code)
-    }
+      console.log(name);
+      const code = getCodeOfName(name.name);
+      code && (this.provinceCode = code);
+    },
   },
   watch: {
     statusValue: {
       handler(val) {
-        this.allItemValue = BiomassData[val.key][0]
+        this.allItemValue = BiomassData[val.key][0];
       },
-      deep: true
-    }
-  }
-}
+      deep: true,
+    },
+  },
+};
 </script>
 
 <style scoped lang="less">

src/pages/renewableEnergyVillage/components/filterProvince.vue

@@ -21,7 +21,6 @@
 
 <script>
 import { mapGetters } from "vuex";
-import PartWrap from "@/components/PartWrap/PartWrap.vue";
 export default {
   name: "filterProvince",
   data() {
@@ -29,9 +28,7 @@ export default {
       search: "",
     };
   },
-  components: {
-    PartWrap,
-  },
+  components: {},
   created() {},
   computed: {
     getData() {

src/pages/renewableEnergyVillage/components/sortList.vue

@@ -14,7 +14,6 @@
 
 <script>
 import { mapGetters } from "vuex";
-import PartWrap from "@/components/PartWrap/PartWrap.vue";
 import Echart from "@/components/Echart/Echarts.vue";
 export default {
   name: "sortList",
@@ -35,7 +34,6 @@ export default {
     };
   },
   components: {
-    PartWrap,
     Echart,
   },
   computed: {

src/pages/renewableEnergyVillage/components/table.vue

@@ -24,7 +24,6 @@
 </template>
 
 <script>
-import PartWrap from "@/components/PartWrap/PartWrap.vue";
 import { mapGetters } from "vuex";
 export default {
   name: "biogasTable",
@@ -41,9 +40,7 @@ export default {
       type: [String, Number],
     },
   },
-  components: {
-    PartWrap,
-  },
+  components: {},
   data() {
     return {
       tableColumn: [

src/pages/renewableEnergyVillage/index.vue

@@ -44,40 +44,38 @@
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex'
-import PartWrap from '@/components/PartWrap/PartWrap.vue'
+import { mapActions, mapState } from "vuex";
 // import StatusControl from '@/components/statusControl/index.vue'
-import { getCodeOfName } from '@/config/city.config'
-import DateWidget from '@/components/DateWidget/DateWidget.vue'
-import EnergyVillageMap from './components/energyVillageMap.vue'
+import { getCodeOfName } from "@/config/city.config";
+import DateWidget from "@/components/DateWidget/DateWidget.vue";
+import EnergyVillageMap from "./components/energyVillageMap.vue";
 // import Table from "./components/table.vue";
-import FilterProvince from './components/filterProvince.vue'
-import SortList from './components/sortList.vue'
+import FilterProvince from "./components/filterProvince.vue";
+import SortList from "./components/sortList.vue";
 // import PicPopup from './components/picPopup.vue'
 export default {
-  name: 'RenewableEnergyVillage',
+  name: "RenewableEnergyVillage",
   components: {
-    PartWrap,
     EnergyVillageMap,
     // Table,
     // StatusControl,
     SortList,
     FilterProvince,
-    DateWidget
+    DateWidget,
     // PicPopup
   },
   created() {
-    this.getData()
+    this.getData();
   },
   data() {
     return {
-      statusControlList: [{ key: 'province', value: '省份筛选' }],
-      showFilter: '',
-      statusValue: { value: '全国' },
+      statusControlList: [{ key: "province", value: "省份筛选" }],
+      showFilter: "",
+      statusValue: { value: "全国" },
       yearRange: [],
-      yearValue: '',
+      yearValue: "",
       showPopup: false,
-      popupId: '',
+      popupId: "",
       imageUrl: `${process.env.VUE_APP_BASE_URL}/images/14_basic_info1.jpg`,
       srcList: [
         `${process.env.VUE_APP_BASE_URL}/images/14_basic_info1.jpg`,
@@ -85,68 +83,67 @@ export default {
         `${process.env.VUE_APP_BASE_URL}/images/14_basic_info3.jpg`,
         `${process.env.VUE_APP_BASE_URL}/images/14_technical_patterns.jpg`,
         `${process.env.VUE_APP_BASE_URL}/images/14_goal_achievement.jpg`,
-        `${process.env.VUE_APP_BASE_URL}/images/14_eco_benefits.jpg`
-      ]
-    }
+        `${process.env.VUE_APP_BASE_URL}/images/14_eco_benefits.jpg`,
+      ],
+    };
   },
   computed: {
     getYearRange() {
-      let yearRange = []
-      this.data.features.forEach(item => {
-        let year = item.properties.vliiage_year
-        if (!yearRange.find(item => item === year)) {
-          yearRange.push(year)
+      let yearRange = [];
+      this.data.features.forEach((item) => {
+        let year = item.properties.vliiage_year;
+        if (!yearRange.find((item) => item === year)) {
+          yearRange.push(year);
         }
-      })
+      });
 
-      let max = Math.max(...yearRange)
-      let min = Math.min(...yearRange)
-      return [String(min), String(max)]
+      let max = Math.max(...yearRange);
+      let min = Math.min(...yearRange);
+      return [String(min), String(max)];
     },
     getCount() {
       return this.data.features.filter(
-        item => item.properties.vliiage_year === this.yearValue
-      )
+        (item) => item.properties.vliiage_year === this.yearValue
+      );
     },
-    ...mapState('energyVillage', ['data'])
+    ...mapState("energyVillage", ["data"]),
   },
   methods: {
     onStatusChange() {
       // if (e.key === this.showFilter.key) {
       //   this.showFilter = {}
       // } else {
-      this.showFilter = true
+      this.showFilter = true;
       // }
     },
     barClick(name) {
-      const code = getCodeOfName(name.name)
-      code && (this.statusValue = { key: code, value: name })
+      const code = getCodeOfName(name.name);
+      code && (this.statusValue = { key: code, value: name });
     },
     onAddressChange(item) {
       this.statusValue = {
         key: item.province_code,
-        value: item.province
-      }
-      this.showFilter = false
+        value: item.province,
+      };
+      this.showFilter = false;
     },
     dateChange(e) {
-      this.yearValue = e
+      this.yearValue = e;
     },
     isShowPopup() {
-      this.$refs.myImg.showViewer = true
-      console.log(this.$refs.myImg)
+      this.$refs.myImg.showViewer = true;
+      console.log(this.$refs.myImg);
       // this.popupId = id
       // if (id === '14') {
       //   this.showPopup = true
       // }
     },
-    ...mapActions('energyVillage', ['getData'])
-  }
-}
+    ...mapActions("energyVillage", ["getData"]),
+  },
+};
 </script>
 
 <style lang="less" scoped>
-
 .enetgyVillage {
   height: inherit;