开展匹配度页面开发

src/views/match/index.vue

@@ -1,5 +1,263 @@
 <template>
-    <div class="match">
-        匹配度
+  <div :class="className" :style="{ height: '100%', width: width }">
+    <div class="select-container">
+      <el-form
+        style="
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr;
+          align-items: center;
+          grid-gap: 5px;
+        "
+        label-width="100px"
+      >
+        <el-form-item label="评估指标">
+          <el-select v-model="matchForm.dataKey" style="width: 100%">
+            <el-option
+              v-for="key in dataKeys"
+              :key="key"
+              :value="key"
+              :label="keyToChinese[key]"
+            >
+              {{ keyToChinese[key] }}
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="行业">
+            <el-select
+            v-model="matchForm.industry"
+            style="width: 100%"
+            filterable
+          >
+            <el-option
+              v-for="item in industryData"
+              :key="item.key"
+              :label="item.value"
+              :value="item.key"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="企业分类">
+            <el-select
+            v-model="matchForm.companyType"
+            style="width: 100%"
+            clearable
+          >
+            <el-option
+              v-for="item in enterTypeList"
+              :key="item.number"
+              :value="item.number"
+              :label="keyToChineseEtype(item.number)"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="相差值阈值"></el-form-item>
+        <!-- 用电:月度;用气:年度;用人:季度 -->
+        <el-form-item label="年度">
+            <el-select
+            v-model="matchForm.year"
+            style="width: 100%"
+            filterable
+          >
+            <el-option
+              v-for="key in yearsOptions"
+              :key="key"
+              :label="key"
+              :value="key"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="月度"></el-form-item>
+        <el-form-item label="季度"></el-form-item>
+      </el-form>
     </div>
-</template>
+  </div>
+</template>
+<script>
+import { analysisMatch } from "@/api/analysis/analysis";
+import { getYearData } from "@/api/home";
+import { listEtypeAll } from "@/api/etype/etype";
+import { listAllIndustry } from "@/api/industry/industry"; // 导入行业数据的接口
+export default {
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "400px",
+    },
+  },
+  data() {
+    return {
+      matchForm: {
+        dataKey: "funding", //评估指标
+        industry: "", //行业
+        companyType: "", //企业分类
+        // 用电
+        year: "", //年度 (用电和用人都用这个年度)
+        elecStartMonth: "", //起始月
+        elecEndMonth: "", //结束月
+        // 用人
+        manStartSeason: "", //起始季度
+        manEndSeason: "", //结束季度
+      },
+      dataKeys: [
+        "funding",
+        "energyConsume",
+        "paidTax",
+        "taxableIncome",
+        "totalIndustrialValue",
+        "powerConsume",
+      ], // 可选项
+      keyToChinese: {
+        landArea: "用地面积",
+        totalIndustrialValue: "工业总产值",
+        gdp: "工业增加值",
+        taxableIncome: "应税收入",
+        paidTax: "实缴税金",
+        mainBusinessIncome: "主营业务收入",
+        employeeNumber: "从业人员数",
+        profit: "利润总额",
+        ownerEquity: "所有者权益",
+        funding: "研发经费",
+        energyConsume: "能源消费量",
+        powerConsume: "电力消费量",
+      },
+      seasonMap: new Map(),
+      monthMap: new Map(),
+      yearsOptions: [],
+      enterTypeList: [],
+      enterTypeList:[],
+      industryData: [],
+      industryMap: new Map(),
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.fetchData();
+    });
+  },
+  methods: {
+    fetchData() {
+      // 获取年份，获取季度、月度
+      this.getYearData();
+      this.getAllIndustry();
+      this.getEtypeAll();
+    },
+    getYearData() {
+      return getYearData().then((res) => {
+        this.yearsOptions = res.rows[0].years;
+        this.seasonMap = this.generateSeason(this.yearsOptions);
+        this.monthMap = this.generateMonthlyData(this.yearsOptions);
+      });
+    },
+
+    getAllIndustry() {
+      return listAllIndustry().then((response) => {
+        if (response?.rows) {
+          this.industryData = response.rows.map((item) => ({
+            key: item.code,
+            value: item.code + item.industryName,
+          }));
+        }
+      });
+    },
+
+    getEtypeAll() {
+      return listEtypeAll().then((res) => {
+        this.enterTypeList = res;
+        // console.log(this.enterTypeList);
+      });
+    },
+    generateSeason(years) {
+      const currentYear = new Date().getFullYear();
+      const currentMonth = new Date().getMonth() + 1;
+      const season = new Map();
+
+      years.forEach((year) => {
+        if (year === currentYear) {
+          // 当前年份，判断当前月份
+          if (currentMonth < 1) {
+            season.set(year, []);
+          } else if (currentMonth < 4) {
+            season.set(year, [1]); // 第一季度
+          } else if (currentMonth < 7) {
+            season.set(year, [1, 2]); // 前两季度
+          } else if (currentMonth < 10) {
+            season.set(year, [1, 2, 3]); // 前三季度
+          } else {
+            season.set(year, [1, 2, 3, 4]); // 四个季度
+          }
+        } else if (year < currentYear) {
+          // 过去的年份都包含四个季度
+          season.set(year, [1, 2, 3, 4]);
+        } else {
+          // 未来的年份
+          season.set(year, []);
+        }
+      });
+
+      return season;
+    },
+    generateMonthlyData(years) {
+      const currentYear = new Date().getFullYear();
+      const currentMonth = new Date().getMonth() + 1;
+      const monthlyData = new Map();
+      years.forEach((year) => {
+        if (year === currentYear) {
+          // 当前年份，判断当前月份
+          const months = Array.from({ length: currentMonth }, (_, i) => i + 1);
+          monthlyData.set(year, months); // 设置当前年份的已过月份
+        } else if (year < currentYear) {
+          // 过去的年份包含所有12个月
+          monthlyData.set(year, [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);
+        } else {
+          // 未来的年份
+          monthlyData.set(year, []);
+        }
+      });
+
+      return monthlyData;
+    },
+    keyToChineseEtype(num) {
+      const item = this.enterTypeList.find((element) => element.number === num);
+      return item ? item.name : null;
+    },
+  },
+};
+</script>
+<style scoped>
+.select-container {
+  margin: 10px 0;
+  font-size: 16px; /* 调整字号大小 */
+}
+
+.select-container select {
+  padding: 10px 20px; /* 增加内边距 */
+  margin-right: 10px; /* 增加右边距 */
+  border: 1px solid #121315; /* 蓝色边框 */
+  border-radius: 4px; /* 圆角边框 */
+  background-color: white; /* 背景色 */
+  color: #121315; /* 文字颜色 */
+  font-size: 16px; /* 调整字号大小 */
+  cursor: pointer; /* 鼠标悬停时的指针样式 */
+  outline: none; /* 移除焦点时的轮廓 */
+}
+
+.select-container select:hover {
+  border-color: #1a7cc8; /* 鼠标悬停时的边框颜色 */
+}
+
+.select-container select:focus {
+  border-color: #121315; /* 焦点时的边框颜色 */
+  box-shadow: 0 0 0 2px rgba(64, 159, 255, 0.2); /* 焦点时的阴影效果 */
+}
+</style>