首页修改图表的lagend，增加企业效益监测评估

src/api/benefit.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 获取柱状图数据
+export function benefitList(data) {
+    return request({
+        url: '/benefit/benefit/list',
+        method: 'post',
+        data: data
+    })
+}

src/views/benefit/index.vue

@@ -0,0 +1,347 @@
+<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
+      ></el-table-column>
+      <el-table-column
+        prop="code"
+        label="所属行业"
+        width="100"
+      ></el-table-column>
+      <el-table-column prop="year" label="年度" width="100"></el-table-column>
+      <el-table-column
+        prop="season"
+        label="季度"
+        width="100"
+        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>

src/views/index.vue

@@ -231,7 +231,7 @@ export default {
         this.chart.dispose();
       }
       this.chart = echarts.init(this.$refs.chart);
-      console.log(this.chartData);
+      // console.log(this.chartData);
       // 饼图
       this.chart.setOption(
         {
@@ -269,7 +269,7 @@ export default {
           yAxis: {
             type: "category",
             // inverse: true,
-            data: this.chartData.map((item) => item.industryName),
+            data: this.chartData.map((item) => item.code+item.industryName),
           },
           series: [
             {
@@ -378,7 +378,7 @@ export default {
       let chartArray = this.pieChartData.map((item) => {
         return {
           value: item.number,
-          name: item.industryName,
+          name: (item.code=="others"?"":item.code)+item.industryName,
         };
       });
       this.piechart = echarts.init(this.$refs.piechart);