考级系统(1.0) (api computens config)

依赖

//依赖
"dependencies": {
    "@vant/area-data": "^1.2.4",
    "@vant/touch-emulator": "^1.3.2",
    "axios": "^0.26.1",
    "core-js": "^3.6.5",
    "countup": "^1.8.2",
    "echarts": "^4.9.0",
    "element-china-area-data": "^5.0.2",
    "element-ui": "^2.15.8",
    "jquery": "^3.6.0",
    "vant": "^2.12.47",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },

//vue.config.js
const path = require('path');
module.exports = {
  lintOnSave: false,
  publicPath: "./",
  productionSourceMap: process.env.NODE_ENV == "production" ? false : true,
  chainWebpack: config => {
    config
      .resolve
      .alias
      .set('v', path.resolve(__dirname, 'src', 'views'))
      .set('c', path.resolve(__dirname, 'src', 'components'))
  }
}

这是src中的东西:
api 接口相关

//req > req1 
import HttpReq from '@/lib/axios'
const req1 = new HttpReq()
// y用这种方式可以独立配置不同的IP URL
req1.config.baseURL = ""
export default new HttpReq();

//接口 
import req1 from "@/api/req/req1";
import req2 from "@/api/req/req2";

// 请求验证码图片接口
export const codeImg = ()=>{
  return req2.request({
    method:'post',
    url:"/codeImg",
  })
}

components: (自定义组件)

//stu
<template>
<!-- 考生信息=基本信息 -->
  <div class="auro">
    <el-form ref="form" :model="form" label-width="150px">
      <!-- 证件照 -->

      <el-form-item label="证件照">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>

      <el-form-item label="真实姓名">
        <el-input
          style="width: 35%"
          v-model="form.name"
          placeholder="请输入考生的真实姓名（同身份证）"
        >
          <!-- <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option> -->
        </el-input>
      </el-form-item>

      <el-form-item label="姓名拼音">
        <el-input
          style="width: 35%"
          v-model="form.namepy"
          placeholder="请输入姓名拼音（姓和名用“逗号”隔开）"
        >
        </el-input>
      </el-form-item>

      <el-form-item label="手机号码">
        <el-input
          v-model="form.phone"
          placeholder="手机号码"
          style="width: 35%"
        >
        </el-input>
      </el-form-item>

      <el-form-item label="证件类型">
        <el-select v-model="form.type" placeholder="身份证" style="width: 35%">
          <el-option label="身份证" value="shenfenz"></el-option>
          <el-option label="护照" value="huzhao"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="证件号码">
        <el-input
          style="width: 35%"
          v-model="form.typenum"
          placeholder="请输入考生的身份证号码"
        >
        </el-input>
      </el-form-item>

      <el-form-item label="性别">
        <el-radio-group v-model="form.radio1" size="medium">
          <el-radio-button label="男"></el-radio-button>
          <el-radio-button label="女"></el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="邮寄地址">
        <el-input
          style="width: 35%"
          v-model="form.emile"
          placeholder="请输入邮寄详细地址"
        >
        </el-input>
      </el-form-item>

      <el-form-item label="联系人">
        <el-input
          style="width: 35%"
          v-model="form.frname"
          placeholder="请输入联系人姓名"
        >
        </el-input>
      </el-form-item>

      <el-form-item label="联系人手机号码">
        <el-input
          v-model="form.frphone"
          placeholder="请输入联系人手机号码"
          style="width: 35%"
        >
        </el-input>
      </el-form-item>

      <el-form-item label="考级城市">
        <el-cascader
          style="width: 35%"
          @change="handleChange"
          v-model="form.selectedOptions"
          placeholder="省/市/区"
          size="large"
          :options="options"
          filterable
          clearable
        ></el-cascader>
      </el-form-item>

      <el-form-item label="详细地址">
        <el-input
          style="width: 35%"
          type="textarea"
          v-model="form.desc"
          placeholder="请输入详细地址"
        ></el-input>
      </el-form-item>

      <el-form-item label="审批意见">
        <el-radio-group v-model="form.resource">
          <el-radio label="通过"></el-radio>
          <el-radio label="不通过"></el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 全国地图
import { regionData, CodeToText } from 'element-china-area-data'
export default {
  name: 'StuText',
  data () {
    return {
      // 图片
      dialogImageUrl: '',
      dialogVisible: false,
      // 地图
      options: regionData,
      form: {
        name: '',
        namepy: '',
        phone: '',
        type: '',
        typenum: '',
        radio1: '男',
        emile: '',
        frname: '',
        frphone: '',
        selectedOptions: [],
        resource: '',
        desc: ''
      }
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleChange (value) {
      console.log('地址编码', value)
      console.log(
        '省市区：',
        CodeToText[value[0]],
        CodeToText[value[1]],
        CodeToText[value[2]]
      )
    }
  }
}
</script>

<style scoped>
.auro {
  box-sizing: border-box;
  padding-top: 5%;
  background: #F2F2F2;
  overflow-y: scroll;
  height: 66vh;
}
</style>


//comHeader 表头
<template>
  <div class="wrap01">
    <p>{{ title }}</p>
  </div>
</template>

<script>

export default {
  name : "COmHeader",
  props: ["title"],
}
</script>

<style scoped>
  p{
    font-size: 24px;
    font-weight:600 ;
    padding-left: 20px;
  }
</style>

//重要的 封装列表 ComLable
<template>
  <div class="cwrap">
    <el-table
      class="comm"
      stripe
      ref="multipleTable"
      tooltip-effect="dark"
      style="width: 100%"
      :data="
        stuData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
      "
    >
      <!-- 全选插槽 -->
      <slot name="quanxuan"></slot>

      <!-- 表头和数据 -->
        <!-- show-overflow-tooltip -->
      <el-table-column
        v-for="(item, i) in arrlist"
        :key="i"
        :prop="item.props"
        :label="item.label"
        :width="width"
      >
      </el-table-column>
      <!-- 按钮插槽 -->
      <slot name="btn">

      </slot>
    </el-table>

    <div class="butn">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="pagesizes"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="stuLength"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  created () {},
  props: ['arrlist', 'stuData', 'stuLength','width'],
  data () {
    return {
      currentPage: 1, // 默认首页
      pagesize: 5, // 每页最大数据
      pagesizes: [5, 10, 15, 20, 100]
    }
  },
  methods: {
    handleSizeChange (val) {
      // 设置每页显示多少条数据
      this.pagesize = val
      this.currentPage = 1
    },
    handleCurrentChange (val) {
      // 切换当前页面
      this.currentPage = val
    }
  }
}
</script>

<style scoped>
.cwrap{
  /* position: relative; */
}
.butn {
  /* position: absolute;
  bottom: 0;
  left: 30%;
  margin: auto; */
}
.cwrap{
  height: 75%;
  overflow-y:scroll;
}
.comm{
  box-sizing: border-box;
  /* padding-bottom: 10%; */
}
</style>

//图表 FirstEach
<template>
  <div class="wrap2">
    <!-- 图表 -->
    <p>人才培养</p>
    <div id="main" ref="main" style="width: 550px; height: 200px"></div>
  </div>
</template>

<script>
import { firstEachApi } from '@/api/queryList'
// import * as echarts from 'echarts'
export default {
  name: 'FirstEach',
  data () {
    return {
      one: [],
      two: []
    }
  },
  created () {},
  methods: {
    async header () {
      var res = await firstEachApi()
      if (res.data.status == 200) {
        this.one = res.data.data.userInfo[0]
        this.two = res.data.data.userInfo[1]
        console.log(this.one, this.two)
        console.log('11111')
        var chartDom = this.$refs.main
        var myChart = this.$echarts.init(chartDom)
        var option = {
          title: [
            {
              text: ''
            }
          ],
          polar: {
            radius: [30, '80%']
          },
          angleAxis: {
            max: 15000,
            startAngle: 75
          },
          radiusAxis: {
            type: 'category',
            data: res.data.data.userInfo[0]
          },
          tooltip: {},
          series: {
            type: 'bar',
            data: res.data.data.userInfo[1],
            coordinateSystem: 'polar',
            label: {
              show: true,
              position: 'middle',
              formatter: '{b}: {c}'
            }
          }
        }
        myChart.setOption(option)
      }
    },
  },
  mounted () {
    this.$nextTick(function () {
      this.header()
    })
  }
}
</script>

<style scoped>
.wrap2{
  box-sizing: border-box;
  padding:10px 30px;
  background: #fff;
  height: 350px;
}
</style>

// FirstHeader
<template>
  <div class="wrap" style="height:20vh">
    <div class="firsthead flex">
      <div class="swrap flex" v-for="(item,i) in userList" :key="i">
        <img style="width:50px;height:50px;" :src="item.hurl" alt="" />
        <div>
          <p>{{ item.numstu }}</p>
          <p>{{ item.shenpistu }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { firstHeadApi } from '@/api/queryList'

export default {

  name: 'FirstHeader',
  created () {
    this.header()
  },
  data () {
    return {
      userList: ''
    }
  },
  methods: {
    // 请求渲染
    async header () {
      var res = await firstHeadApi()
      if (res.data.status == 200) {
        this.userList = res.data.data.userInfo.userList
        console.log(this.userList , '这是data');
      }
    }
  }
}
</script>

<style scoped>

  .flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* flex-direction: column; */
  }
  .firsthead{
    padding: 10px 20px;
  }
  .swrap{

    width:23%;
    box-sizing: border-box;
    padding:10px 20px !important;
    background: #fff;
  }
  .swrap p{
    font-weight: 900 !important;
  }
</style>

//FirstPeople
<template>
  <div class="wrap1 flex com"  >
    <p>NEW.Client</p>
    <div class="swrap flex"  v-for="(item, i) in userList" :key="i" style="padding:10px 0px;">
      <img :src="item.hurl" alt="" style="padding:0 20px; ">
      <div class="right flex com">
        <span>{{ item.user }}</span>
        <span> {{ item.eMile }} </span>
      </div>
    </div>
  </div>
</template>

<script>
import { firstPeopleApi } from '@/api/queryList'
export default {
  name: 'FirstPeople',
  created () {
    this.prople()
  },
  data () {
    return {
      userList: ''
    }
  },
  methods: {
    async prople () {
      var res1 = await firstPeopleApi()
      if (res1.data.status == 200) {
        this.userList = res1.data.data.userInfo.peopleList
        console.log(res1.data.data.userInfo.peopleList, '这是people')
      }
    }
  }
}
</script>

<style scoped>
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.com {
  flex-direction: column;
}
.wrap1{
  /* width:200px; */
  box-sizing: border-box;
  padding:10px 30px;
  background: #fff;
  height: 350px;
}
.right{
  /* width: 100px; */
 align-items: flex-start;
}
</style>