enteprise-ui/src/views/benefit/index.vue

<template>
  <!-- littlegreen - 企业效益监测评估 - 差对接查询接口 -->
  <div :class="className" :style="{ width: width, padding: '20px' }">
    <div class="select-container">
      <el-form
        style="
          display: grid;
          grid-template-columns: 1fr 1.3fr 1fr;
          align-items: center;
          grid-gap: 20px;
        "
        label-width="100px"
      >
        <el-form-item label="行业代码" style="margin-bottom: 0">
          <el-select
            v-model="form.code"
            style="width: 100%"
            filterable
            @change="codeChange"
          >
            <el-option
              v-for="item in selectedIndustryArray"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业" style="margin-bottom: 0">
          <el-select
            v-model="form.enterpriseName"
            style="width: 100%"
            filterable
            clearable
          >
            <el-option
              v-for="item in selectedEnterpriseArray"
              :key="item.key"
              :label="item.value"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年度" style="margin-bottom: 0">
          <el-select v-model="form.year" style="width: 100%">
            <el-option
              v-for="item in selectedYearArray"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="季度" style="margin-bottom: 0">
          <el-select v-model="form.season" style="width: 100%" clearable>
            <el-option
              v-for="item in selectedSeasonArray"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分析方式" style="margin-bottom: 0">
          <el-select v-model="form.mode" style="width: 100%">
            <el-option
              v-for="item in selectedAnalyseArray"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-bottom: 0">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="submit"
            >搜索</el-button
          ><el-button icon="el-icon-refresh" size="mini" @click="resetForm"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="paginatedData"
      border
      style="width: 100%; margin-top: 30px"
    >
      <el-table-column
        prop="enterpriseName"
        label="企业名称"
        width="200"
        sortable
        align="center"
      ></el-table-column>
      <el-table-column
        prop="code"
        label="所属行业"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
      align="center" 
      prop="year" label="年度" width="100"></el-table-column>
      <el-table-column
        prop="season"
        label="季度"
        width="100"
        align="center"
        sortable
      ></el-table-column>
      <el-table-column
        v-if="mode == 'trendAnalysis'"
        prop="trendAnalysis"
        label="趋势分析情况"
        width="300"
      ></el-table-column>
      <el-table-column
        v-if="mode == 'avgAnalysis'"
        prop="avgAnalysis"
        label="平均水平分析情况"
        width="350"
      ></el-table-column>
      <el-table-column
        prop="operationalEvaluate"
        label="企业运营评估结果参考"
      ></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalItems"
      hide-on-single-page
      background
      layout="total, prev, pager, next, jumper"
      style="float: right; margin-top: 20px; margin-bottom: 20px"
    >
    </el-pagination>
    <!-- <div ref="chart" :style="{ height: height, width: width }"></div> -->
  </div>
</template>

<script>
import { listAllEnterprise } from "@/api/enterprise/enterprise";
import { listAllIndustry } from "@/api/industry/industry";
import { getIndexData } from "@/api/home";
import { benefitList } from "@/api/benefit";
export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "400px",
    },
  },
  data() {
    return {
      selectedEnterpriseArray: [],
      EnterpriseArray: [],
      selectedYearArray: [],
      selectedIndustryArray: [],
      mode: "trendAnalysis",
      currentPage: 1,
      pageSize: 5,
      form: {
        enterpriseName: null,
        year: null,
        code: null,
        season: "1",
        mode: "trendAnalysis",
      },
      selectedAnalyseArray: [
        {
          key: "trendAnalysis",
          value: "趋势分析",
        },
        {
          key: "avgAnalysis",
          value: "平均水平分析",
        },
      ],
      selectedSeasonArray: [
        {
          key: "1",
          value: "1季度",
        },
        {
          key: "2",
          value: "2季度",
        },
        {
          key: "3",
          value: "3季度",
        },
        {
          key: "4",
          value: "4季度",
        },
      ],
      tableData: [],
    };
  },
  computed: {
    totalItems() {
      return this.tableData.length;
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      return this.tableData.slice(start, start + this.pageSize);
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    handlePageChange(newPage) {
      this.currentPage = newPage;
    },
    async init() {
      const that = this;
      // 获取所有的行业
      await listAllIndustry()
        .then((res) => {
          if (res && res?.rows) {
            that.selectedIndustryArray = res.rows.map((item) => {
              return {
                key: item.code,
                value: item.code + item.industryName,
              };
            });
          }
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
      // 获取所有的企业
      await listAllEnterprise()
        .then((res) => {
          if (res && res?.rows) {
            that.EnterpriseArray = res.rows.map((item) => {
              return {
                key: item.id,
                value: item.enterpriseName,
                code: item.code,
              };
            });
          }
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
      // 获取有的年份
      await getIndexData({
        year: 0,
      })
        .then((res) => {
          if (res && res?.rows) {
            that.selectedYearArray = res.rows[0].years.map((v) => {
              return {
                key: v,
                value: v,
              };
            });
          }
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
      // 第一次的时候初始化from
      this.resetForm();
    },
    submit() {
      benefitList(this.form)
        .then((res) => {
          if (res && res?.rows) {
            this.mode = this.form.mode;
            this.tableData = res.rows;
          }
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
    },
    resetForm() {
      // 过滤对应行业的的企业出来
      this.selectedEnterpriseArray = this.EnterpriseArray.filter(
        (item) => item.code == this.selectedIndustryArray[0].key
      );
      // 重置form表单
      this.form = {
        year: this.selectedYearArray[0].key,
        enterpriseName: null,
        code: this.selectedIndustryArray[0].key,
        season: null,
        mode: this.selectedAnalyseArray[0].key,
      };
      this.submit();
    },
    codeChange(e) {
      // 当选择的行业变化时，过滤对应行业的的企业出来
      this.selectedEnterpriseArray = this.EnterpriseArray.filter(
        (item) => item.code == e
      );
      this.form.enterpriseName = null;
    },
  },
};
</script>

<style scoped>
.select-container {
  margin: 10px 5px;
  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>