依赖
//依赖
"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>