src/views/dashboard/mixins/resize.js

@@ -49,8 +49,10 @@ export default {
       this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
     },
     resize() {
-      const { chart } = this
+      const { chart, piechart } = this
       chart && chart.resize()
+      // littlegreen
+      piechart && piechart.resize()
     }
   }
 }

src/views/index.vue

@@ -1,96 +1,423 @@
 <template>
-  <div :class="className" :style="{ height: height, width: width }">
-    <!-- <div ref="chart" :style="{ height: height, width: width }"></div> -->
+<!-- 首页 - littlegreen -->
+  <div :class="className" :style="{ height: '100%', width: width }">
+    <el-row
+      :gutter="20"
+      class="i-row"
+      style="margin-left: 0px; margin-right: 0px"
+    >
+      <el-col>
+        <el-card>
+          <div class="i-gq">
+            <h3 class="i-title">政府与企业总投入</h3>
+            <el-dropdown >
+              <span class="el-dropdown-link" style="color: black;font-size: 16px;font-weight: bold;">
+                {{ selectYear }}
+                <i class="el-icon-arrow-down el-icon--right" style="font-size: 16px;font-weight: bold;"></i>
+                <!-- <i class="el-icon-sort el-icon--right" style="font-size: 16px;font-weight: bold;transform:rotate(90deg)"></i> -->
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item v-for="(data, i) in yearDataList" :key="i" @click.native="handleDrop(data)">
+                  {{data.name}}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <div>
+                <p class="i-name">土地/亩</p>
+                <p class="i-number">500</p>
+              </div>
+            </el-col>
+            <el-col :span="6"
+              ><div>
+                <p class="i-name">电力/万千瓦时</p>
+                <p class="i-number">4185</p>
+              </div></el-col
+            >
+            <el-col :span="6"
+              ><div>
+                <p class="i-name">天然气/立方米</p>
+                <p class="i-number">33284</p>
+              </div></el-col
+            >
+            <el-col :span="6">
+              <div>
+                <p class="i-name">研发经费/万元</p>
+                <p class="i-number">14299</p>
+              </div>
+              </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row
+      :gutter="20"
+      class="i-row"
+      style="margin-left: 0px; margin-right: 0px"
+    >
+      <el-col :span="14">
+        <el-card>
+          <h3 class="i-title">行业分类企业数量</h3>
+          <el-row>
+            <el-col :span="24">
+              <div
+                ref="piechart"
+                :style="{ height: height, width: width }"
+              ></div>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="10" style="height: 100%">
+        <el-card>
+          <h3 class="i-title">产出总效益</h3>
+          <el-row
+            :style="{ height: height, width: width }"
+            style="
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+            "
+          >
+            <el-col :span="24"
+              ><div class="i-out-box">
+                <p class="i-name">工业总产值/万元</p>
+                <p class="i-number">54252622</p>
+              </div></el-col
+            >
+            <el-col :span="24"
+              ><div class="i-out-box">
+                <p class="i-name">应税收入/万元</p>
+                <p class="i-number">41857</p>
+              </div></el-col
+            >
+            <el-col :span="24"
+              ><div class="i-out-box">
+                <p class="i-name">实缴税金/万元</p>
+                <p class="i-number">33651</p>
+              </div></el-col
+            >
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row
+      class="i-row"
+      :gutter="20"
+      style="margin-left: 0px; margin-right: 0px"
+    >
+      <el-col :span="24">
+        <el-card>
+          <h3 class="i-title">行业分类企业数量</h3>
+          <div ref="chart" :style="{ height: height, width: width }"></div>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-import * as echarts from 'echarts';
-
+import * as echarts from "echarts";
+import resize from "./dashboard/mixins/resize";
 export default {
+  mixins: [resize],
   props: {
     className: {
       type: String,
-      default: 'chart'
+      default: "chart",
     },
     width: {
       type: String,
-      default: '100%'
+      default: "100%",
     },
     height: {
       type: String,
-      default: '400px'
-    }
+      default: "300px",
+    },
   },
   data() {
     return {
       chart: null,
+      piechart: null,
+      yearDataList:[
+        {
+          name: "总和"
+        },
+        {
+          name: "2023"
+        },
+        {
+          name: "2024"
+        }
+      ],
+      selectYear: "总和"
     };
   },
   mounted() {
     this.initChart();
+    this.initPieChart();
   },
   beforeDestroy() {
     if (this.chart) {
       this.chart.dispose();
     }
+    if (this.piechart) {
+      this.piechart.dispose();
+    }
   },
   methods: {
+    // 初始化柱状图
     initChart() {
       if (this.chart) {
         this.chart.dispose();
       }
       this.chart = echarts.init(this.$refs.chart);
+      // 饼图
+      //
+      this.chart.setOption(
+        {
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              type: "shadow",
+            },
+          },
+          dataZoom: [
+            {
+              type: 'slider',
+              yAxisIndex: 0,
+              left: 0,
+              start: 80,
+              end: 100
+            },
+            {
+              type: 'inside',
+              yAxisIndex: 0
+            }
+          ],
+          legend: {},
+          grid: {
+            top: "2%",
+            left: "4%",
+            right: "2%",
+            bottom: "2%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "value",
+            boundaryGap: [0, 0.01],
+          },
+          yAxis: {
+            type: "category",
+            // inverse: true,
+            data: [
+              "文教、工美、体育和娱乐用品制造业",
+              "文教、工美、体育和娱乐用品制造12",
+              "文教、工美、体育和娱乐用品制造业67",
+              "文教、工美、体育和娱乐用品制造业89",
+              "文教、工美、体育和娱乐用品制造业90",
+              "文教、工美、体育和娱乐用品制造业23",
+              "文教、工美、体育和娱乐用品制造业21",
+              "文教、工美、体育和娱乐用品制造业22",
+              "文教、工美、体育和娱乐用品制造业334",
+              "文教、工美、体育和娱乐用品制造业77",
+              "文教、工美、体育和娱乐用品制造业78",
+              "文教、工美、体育和娱乐用品制造业79",
+              "文教、工美、体育和娱乐用品制造业71",
+              "文教、工美、体育和娱乐用品制造业72",
+              "文教、工美、体育和娱乐用品制造业73",
+            ],
+          },
+          series: [
+            {
+              // realtimeSort: true,
+              type: "bar",
+              data: [60, 50, 40, 30, 20, 10, 32, 45, 78, 99,33,44,55,66,77],
+              label: {
+                show: true,
+                formatter: "{c}",
+                position: "right",
+              },
+              barWidth: "30%",
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0.8, 0, 0, 0, [
+                  { offset: 0, color: "#83bff6" },
+                  { offset: 0.5, color: "#188df0" },
+                  { offset: 1, color: "#188df0" },
+                ]),
+                barBorderRadius: [0, 50, 50, 0],
+              },
+            },
+          ],
+        }
 
-      const xValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-      const yValues1 = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20];
-      const yValues2 = [3, 6, 9, 12, 15, 18, 21, 24, 27, 30];
-
-      this.chart.setOption({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
-          }
-        },
-        legend: {
-          data: ['曲线 1', '曲线 2']
-        },
-        grid: {
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true
-        },
-        xAxis: {
-          type: 'category',
-          data: xValues,
-          axisLabel: {
-            fontSize: 12
+        // {
+        // title: {
+        //   text: 'Referer of a Website',
+        //   subtext: 'Fake Data',
+        //   left: 'center'
+        // },
+        // tooltip: {
+        //   trigger: "item",
+        // },
+        // legend: {
+        //   type: "scroll",
+        //   scrollDataIndex: 0,
+        //   orient: "vertical",
+        //   left: 10,
+        //   itemGap: 20,
+        //   top: "middle",
+        //   align: "left",
+        //   icon: "circle",
+        //   formatter: (name) => {
+        //     if (!name) return "";
+        //     return this.getEqualNewlineString(name, 10); // 根据你的需求修改参数
+        //   },
+        // },
+        // series: [
+        //     {
+        //       radius: ['20%', '100%'],
+        //       center: ['65%', '50%'],
+        //       avoidLabelOverlap: false,
+        //       type: "pie",
+        //       radius: "50%",
+        //       data: [
+        //         { value: 1048, name: "文教、工美、体育和娱乐用品制造业" },
+        //         { value: 735, name: "皮革、毛皮、羽毛及其制品和制鞋业" },
+        //         { value: 580, name: "电气机械和器材制造业" },
+        //         { value: 484, name: "印刷和记录媒介复制业" },
+        //         { value: 300, name: "电气机械和器材制造业" },
+        //         { value: 300, name: "皮革、毛皮、羽毛及其制品和制鞋业" },
+        //         { value: 300, name: "金属制品业" },
+        //         { value: 300, name: "农副食品加工业" },
+        //         { value: 300, name: "酒、饮料和精制茶制造业" },
+        //         { value: 300, name: "造纸和纸制品业" },
+        //       ],
+        //       itemStyle: {
+        //         normal: {
+        //           label: {
+        //             show: false,
+        //           },
+        //           labelLine: {
+        //             show: false,
+        //           },
+        //         },
+        //       },
+        //     },
+        //   ],
+        // }
+      );
+    },
+    //params 要处理的字符串
+    //length 每行显示长度
+    getEqualNewlineString(params, length) {
+      let text = "";
+      let count = Math.ceil(params.length / length); // 向上取整数
+      // 一行展示length个
+      if (count > 1) {
+        for (let z = 1; z <= count; z++) {
+          text += params.substr((z - 1) * length, length);
+          if (z < count) {
+            text += "\n";
           }
-        },
-        yAxis: {
-          type: 'value'
+        }
+      } else {
+        text += params.substr(0, length);
+      }
+      return text;
+    },
+    // 初始化饼图
+    initPieChart() {
+      if (this.piechart) {
+        this.piechart.dispose();
+      }
+      this.piechart = echarts.init(this.$refs.piechart);
+      this.piechart.setOption({
+        tooltip: {
+          trigger: "item",
         },
         series: [
           {
-            name: '曲线 1',
-            type: 'line',
-            data: xValues.map((x, index) => [x, yValues1[index]]),
-            color: '#4CAF50'
+            type: "pie",
+            radius: ["40%", "75%"],
+            center: ["50%", "50%"],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 5,
+              borderColor: "#fff",
+              borderWidth: 2,
+            },
+            label: {
+              show: true,
+            },
+            // emphasis: {
+            //   label: {
+            //     show: false,
+            //     fontSize: 40,
+            //     fontWeight: "bold",
+            //   },
+            // },
+            labelLine: {
+              show: true,
+            },
+            data: [
+              { value: 1048, name: "文教、工美、体育和娱乐用品制造业" },
+              { value: 735, name: "皮革、毛皮、羽毛及其制品和制鞋业" },
+              { value: 580, name: "电气机械和器材制造业" },
+              { value: 484, name: "印刷和记录媒介复制业" },
+              { value: 300, name: "电气机械和器材制造业" },
+              { value: 300, name: "皮革、毛皮、羽毛及其制品和制鞋业" },
+              { value: 300, name: "金属制品业" },
+              { value: 300, name: "农副食品加工业" },
+              { value: 300, name: "酒、饮料和精制茶制造业" },
+              { value: 300, name: "其他" },
+            ],
           },
-          {
-            name: '曲线 2',
-            type: 'line',
-            data: xValues.map((x, index) => [x, yValues2[index]]),
-            color: '#FF5722'
-          }
-        ]
+        ],
       });
+    },
+    // 切换年份
+    handleDrop(e){
+      this.selectYear = e?.name
     }
-  }
+  },
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.i-gq {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.i-row {
+  margin: 15px 0;
+  .i-title {
+    font-weight: bold;
+    margin: 10px 0 25px;
+  }
+  p {
+    margin: 0;
+  }
+  .i-number {
+    font-size: 40px;
+    font-weight: bold;
+    letter-spacing: 2px;
+  }
+  .i-name {
+    letter-spacing: 1px;
+    margin-bottom: 10px;
+  }
+  .i-out-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 10px 0;
+    .i-name {
+      margin-bottom: 0;
+    }
+  }
+}
 </style>

src/views/industry_run/index.vue

@@ -0,0 +1,3 @@
+<template>
+    <div>企业运行数据</div>
+</template>

src/views/predict/predict/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="app-container">
-<!--    <sandianpredict></sandianpredict>-->
+   <!-- <sandianpredict></sandianpredict> -->
+   <!-- littlegreen - 补充form-label -->
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="企业名称" prop="enterpriseName">
         <el-input
@@ -149,17 +150,17 @@
       <el-table-column label="企业名称" align="center" prop="enterpriseName" />
       <el-table-column label="坐落地" align="center" prop="location" />
       <el-table-column label="行业代码" align="center" prop="code" />
-      <el-table-column label="工业总产值预测" align="center" prop="totalIndustrialValuePredict" sortable width="155"/>
+      <el-table-column label="工业总产值预测/万元" align="center" prop="totalIndustrialValuePredict" sortable width="170"/>
       <!-- <el-table-column label="月份" align="center" prop="month" /> -->
-      <el-table-column label="电力消费量预测" align="center" prop="powerConsumePredict" sortable width="155"/>
+      <el-table-column label="电力消费量预测/万KW·h" align="center" prop="powerConsumePredict" sortable width="200"/>
       <el-table-column label="月份" align="center" prop="month" />
-      <el-table-column label="应税收入预测" align="center" prop="taxableIncomePredict" sortable width="155"/>
+      <el-table-column label="应税收入预测/万元" align="center" prop="taxableIncomePredict" sortable width="170"/>
       <!-- <el-table-column label="季度" align="center" prop="month" /> -->
-      <el-table-column label="实缴税金预测" align="center" prop="paidTaxPredict" sortable width="155"/>
+      <el-table-column label="实缴税金预测/万元" align="center" prop="paidTaxPredict" sortable width="155"/>
       <el-table-column label="季度" align="center" prop="season" />
-      <el-table-column label="能源消费量预测" align="center" prop="energyConsumePredict" sortable width="155"/>
+      <el-table-column label="能源消费量预测/万m³" align="center" prop="energyConsumePredict" sortable width="170"/>
       <!-- <el-table-column label="年份" align="center" prop="year" /> -->
-      <el-table-column label="研发经费预测" align="center" prop="fundingConsumePredict" sortable width="155"/>
+      <el-table-column label="研发经费预测/万元" align="center" prop="fundingConsumePredict" sortable width="155"/>
       <el-table-column label="年份" align="center" prop="year" />
       <el-table-column label="预测模型" align="center" prop="model" />
 <!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->