3.11前端页面提交

ruoyi-ui/package.json

@@ -40,7 +40,7 @@
     "axios": "0.21.0",
     "clipboard": "2.0.6",
     "core-js": "3.8.1",
-    "echarts": "4.9.0",
+    "echarts": "^4.9.0",
     "element-ui": "2.15.0",
     "express": "^4.17.1",
     "file-saver": "2.0.4",

ruoyi-ui/src/components/Echarts/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="Echarts">
+    <div id="main" style="width:100%; height:600px;"></div>
+  </div>
+</template>
+
+<script>
+  require('echarts/lib/component/legend')
+  export default {
+    name: 'Echarts',
+    methods: {
+      myEcharts() {
+        // 基于准备好的dom，初始化echarts实例
+        var myChart = this.$echarts.init(document.getElementById('main'));
+
+        // 指定图表的配置项和数据
+        var option = {
+          title: {
+            text: '到资金额柱状图',
+            top: 0,
+            left: 'center',
+            subtextStyle: {
+              fontFamily: "微软雅黑",
+              fontSize: 14,
+              color: '#6c7a89',
+            }
+          },
+          tooltip: {},
+          legend: {
+            data: ['到账金额'],
+            top: 25,
+          },
+          xAxis: {
+            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
+          },
+          yAxis: {},
+          series: [{
+            name: '到账金额',
+            type: 'bar',
+            data: [5, 20, 36, 10, 10, 20],
+            itemStyle: {
+              normal: {
+                color: '#1C84C6', //设置柱子颜色
+                label: {
+                  show: true, //柱子上显示值
+                  position: 'top', //值在柱子上方显示
+                  textStyle: {
+                    color: '#333' //值得颜色
+                  }
+                }
+              }
+            },
+          }]
+        };
+
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option);
+      }
+    },
+    mounted() {
+      this.myEcharts();
+    }
+  }
+</script>
+
+<style>
+
+</style>

ruoyi-ui/src/main.js

@@ -12,6 +12,10 @@ import store from './store'
 import router from './router'
 import permission from './directive/permission'
 
+import echarts from 'echarts'
+Vue.prototype.$echarts = echarts
+
+
 import './assets/icons' // icon
 import './permission' // permission control
 import { getDicts } from "@/api/system/dict/data";

ruoyi-ui/src/views/index.vue

@@ -1,9 +1,180 @@
 <template>
-  <div>
-    <h1>这是首页</h1>
-    <!-- <sign-contract></sign-contract> -->
+  <div class="in_box">
+    <el-row>
+      <el-col :span="19">
+        <div class="in_left">
+          <div class="toReviewed">
+            <div class="rev_title">
+              待审核项目
+            </div>
+            <el-table v-loading="loading" :data="infoList">
+              <el-table-column label="项目名称" align="center" prop="name" />
+              <el-table-column label="当前状态" align="center" prop="totAmt" />
+              <el-table-column label="时间" align="center" prop="deptName" />
+              <el-table-column label="操作" width="280" align="center" class-name="small-padding fixed-width">
+                <template slot-scope="scope">
+                  <el-button size="mini" type="text" style="background: #F5A40C;color: #FFF;padding: 7px;" v-hasPermi="['projectInfo:info:edit']">查看详情</el-button>
+                  <el-button size="mini" type="text" style="background: #DE1939;color: #FFF;padding: 7px;" v-hasPermi="['projectInfo:info:edit']"
+                    @click="infoBtn(scope.row)">确认审核</el-button>
+                  <el-button size="mini" type="text" style="background: #1C84C6;color: #FFF;padding: 7px;" v-hasPermi="['projectInfo:info:edit']">驳回</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <div class="exl_box">
+            <div class="exl_title">
+              <span>招资引资项目到资金额</span>
+              <el-select width="80" v-model="lb_value" placeholder="请选择">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+              </el-select>
+            </div>
+            <echarts></echarts>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="5" style="padding: 24px 12px 24px 0 ;">
+        <div class="in_right">
+          <div class="rig_title">
+            单位榜单
+          </div>
+          <div class="rig_tab_top">
+            <div class="rig_tab_item">
+              单位名称
+            </div>
+            <div class="rig_tab_item">
+              目标任务
+            </div>
+            <div class="rig_tab_item">
+              已完成任务
+            </div>
+          </div>
+          <div class="rig_cont">
+            <div class="rig_items">
+              <span>招商局</span>
+              <span>2个</span>
+              <span>1个</span>
+            </div>
+          </div>
+          <div class="rig_tab_top" style="background-color: #1C84C6;">
+            <div class="rig_tab_item">
+              单位名称
+            </div>
+            <div class="rig_tab_item">
+              目标任务
+            </div>
+            <div class="rig_tab_item">
+              已完成任务
+            </div>
+          </div>
+          <div class="rig_cont">
+            <div class="rig_items">
+              <span>招商局</span>
+              <span>2个</span>
+              <span>1个</span>
+            </div>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 <script>
+  import echarts from '@/components/Echarts/index.vue'
+  export default {
+    data() {
+      return {
+        infoList: [1],
+        loading: false,
+        options: [{
+            value: '2020'
+          },
+          {
+            value: '2021'
+          },
+        ],
+        lb_value: '2021', // 柱状图类别
+      }
+    },
+    components: {
+      echarts
+    },
+    methods: {
+      infoBtn() {
 
+      },
+    }
+  }
 </script>
+<style lang="scss" scoped>
+  .rig_tab_top{
+    display: flex;
+    background: #6DCEF6;
+    line-height: 36px;
+    color: #fff;
+    .rig_tab_item{
+      font-size: 14px;
+      flex: 1;
+      text-align: center;
+    }
+  }
+  .rig_cont{
+    border: 1px solid #CDCDCD;
+    box-sizing: border-box;
+    margin-bottom: 31px;
+    .rig_items{
+      line-height: 36px;
+      color: #343434;
+      font-size: 12px;
+      display: flex;
+      span{
+        flex: 1;
+        text-align: center;
+      }
+    }
+  }
+  .in_right{
+    padding: 15px 15px 0;
+    border: 1px solid #DADADA;
+    box-shadow: 0px 7px 9px 2px rgba(201, 201, 201, 0.36);
+    .rig_title{
+      color: #1C84C6;
+      font-size: 18px;
+      line-height: 36px;
+      margin-bottom: 15px;
+    }
+  }
+  .in_left {
+    padding: 24px 20px 40px;
+
+    .toReviewed {
+      padding: 19px 16px;
+      border: 1px solid #DADADA;
+      box-shadow: 0px 7px 9px 2px rgba(201, 201, 201, 0.36);
+      margin-bottom: 38px;
+
+      .rev_title {
+        margin-bottom: 23px;
+      }
+    }
+
+    .exl_box {
+      border: 1px solid #DADADA;
+      box-shadow: 0px 7px 9px 2px rgba(201, 201, 201, 0.36);
+      padding: 20px;
+      box-sizing: border-box;
+
+      .exl_title {
+        display: flex;
+        justify-content: space-between;
+
+        span {
+          color: #1C84C6;
+          font-size: 18px;
+          line-height: 36px;
+        }
+
+      }
+    }
+  }
+</style>