医院网站建设存在问题,wordpress后台卡顿,网站按域名跳转不同的页面,seo文章代写一篇多少钱文章目录前言一、home 页以下都属于home子组件二、header 头部 组件二、Menu 页面三、Bread 面包屑四、Footer五 、分页器#xff1a; Pageing六、权限管理总结前言
这章…
文章目录前言一、home 页以下都属于home子组件二、header 头部 组件二、Menu 页面三、Bread 面包屑四、Footer五 、分页器 Pageing六、权限管理总结前言
这章主写内容 该要的配置都有
上章链接《后台管理中》点击跳转
一、home 页
路由在《后台管理上》划分组件 每个组件某个功能
templatediv classhome!-- 头部 --Header/Header!-- 主体部分 --el-container classcontent!-- 左侧 --Menu/Menu!-- 右侧 --el-containerel-main!-- 面包屑 --Bread/Bread!-- 路由视图出口 --div classcountrouter-view/router-view/div/el-main!-- 尾部 --el-footerFooter/Footer/el-footer/el-container/el-container/div
/templatescript
import Header from /components/common/Header;
import Bread from /components/common/Breadcrumb;
import Menu from /components/common/Menu;
import Footer from /components/common/Footer;
export default {name: Home,components: {Header,Bread,Menu,Footer,},
};
/scriptstyle langscss scoped
.home {width: 100%;height: 100%;.content {position: absolute;width: 100%;top: 60px;bottom: 0;.count {margin: 20px 0;}}
}
/style
以下都属于home子组件
学生列表 StudentList
templatediv classstudent!-- 查询 --el-form:inlinetrue:modelformInlineclassdemo-form-inlinesizesmallel-form-item label姓名el-input v-modelformInline.name placeholder请输入姓名/el-input/el-form-itemel-form-itemel-button typeprimary clickfind查询/el-button/el-form-itemel-form-itemel-button typeprimary clickreset重置/el-button/el-form-item/el-form!-- 表格 --!-- 1: 0-9 2: 10-19 3: 20-29 slice((当前页数-1)*每页的条数当前页数*当前的条数) --el-table :datacompDate border stylewidth: 100%el-table-column propname label姓名 aligncenter/el-table-columnel-table-column propage label年龄 aligncenter/el-table-columnel-table-column propsex_text label性别 aligncenter/el-table-columnel-table-column propnumber label学号 aligncenter/el-table-columnel-table-column propclass label班级号 aligncenter/el-table-columnel-table-column propstate_text label状态 aligncenter/el-table-columnel-table-column propphone label联系方式 aligncenter width110/el-table-columnel-table-column propaddress label地址 aligncenter/el-table-columnel-table-column aligncenter label操作 width100template slot-scopescopeel-buttontypedangersizeminiiconel-icon-deleteclickdel(scope.row)/el-button/template/el-table-column/el-table!-- 分页 --el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage:page-sizes[5, 10, 20, 30, 50]:page-sizepageSizelayouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/div
/templatescript
import { student, studentDel } from /api/api;export default {data() {return {// 表格内的总数据tableData: [],// 查询formInline: {name: ,},// 总条数total: 0,// 每页显示的数量pageSize: 10,// 当前页currentPage: 1,};},mounted() {this.getData();},computed: {compDate() {return (// 起点this.tableData.slice((this.currentPage - 1) * this.pageSize,// 终点数据截取在终点的前一个结束this.currentPage * this.pageSize));},},methods: {// 修改每页显示的数量handleSizeChange(val) {this.pageSize val;// 每次修改完成后回到当前第一页this.currentPage 1;},// 修改当前页handleCurrentChange(val) {this.currentPage val;},// 获取数据getData(params) {student(params).then((res) {if (res.data.status 200) {// 表格内的总数据this.tableData res.data.data;// 总条数this.total res.data.total;// 循环遍历this.tableData.forEach((item) {// 因有些后台是数组前端显示时需要改变为汉字// 尽量不要去修改原数据因为后续的使用会造成影响item.sex 1 ? (item.sex_text 男) : (item.sex_text 女);item.state 1? (item.state_text 已入学): item.state 2? (item.state_text 未入学): (item.state_text 休学中);});}});},// 删除del(row) {studentDel(row.id).then((res) {if (res.data.status 200) {this.$message({ message: 数据删除成功, type: success });// 重新获取数据this.getData();}});console.log(row);},// 查询find() {this.getData(this.formInline);},// 重置reset() {this.formInline {};this.getData(this.formInline);},},
};
/scriptstyle langscss
.student {.demo-form-inline,.el-form-inline,.el-pagination {text-align: left;}.el-pagination {margin-top: 40px;}
}
/style
信息列表 InfoList
templatediv classinfolist!-- 新增按钮 --el-form :inlinetrue classdemo-form-inline sizesmallel-form-itemel-button typeprimary clickaddStudent新增/el-button/el-form-item/el-form!-- 表格 --el-table :datacompDate stylewidth: 100% borderel-table-column propname label姓名 aligncenter/el-table-columnel-table-column propsex_text label性别 aligncenter/el-table-columnel-table-column propage label年龄 aligncenter/el-table-columnel-table-column propfather label父亲 aligncenter/el-table-columnel-table-column propmather label母亲 aligncenter/el-table-columnel-table-column proptime label入校时间 aligncenter/el-table-columnel-table-column propphone label联系方式 aligncenter width120/el-table-columnel-table-column propaddress label地址 /el-table-columnel-table-column aligncenter label操作 width120template slot-scopescopeel-buttontypedangersizesmalliconel-icon-editclickedit(scope.row)/el-buttonel-buttontypedangersizesmalliconel-icon-deleteclickdel(scope.row)/el-button/template/el-table-column/el-table!-- 复用的提示框 --el-dialog:titlestate ? 添加学生信息 : 修改学生信息:visible.syncdialogFormVisiblewidth500pxel-form :modelform refformel-form-item label姓名 propname :label-widthformLabelWidthel-input v-modelform.name autocompleteoff/el-input/el-form-itemel-form-item label性别 propsex :label-widthformLabelWidthel-radio v-modelform.sex label1男/el-radioel-radio v-modelform.sex label2女/el-radio/el-form-itemel-form-item label年龄 propage :label-widthformLabelWidthel-input v-modelform.age autocompleteoff/el-input/el-form-itemel-form-item label父亲 propfather :label-widthformLabelWidthel-input v-modelform.father autocompleteoff/el-input/el-form-itemel-form-item label母亲 propmather :label-widthformLabelWidthel-input v-modelform.mather autocompleteoff/el-input/el-form-itemel-form-itemlabel入校时间proptime:label-widthformLabelWidthel-date-pickerv-modelform.timetypedateformatyyyy 年 MM 月 dd 日placeholder选择日期value-formatyyyy-MM-dd/el-date-picker/el-form-itemel-form-itemlabel家庭地址propaddress:label-widthformLabelWidthel-input v-modelform.address autocompleteoff/el-input/el-form-itemel-form-itemlabel联系方式propphone:label-widthformLabelWidthel-input v-modelform.phone autocompleteoff/el-input/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickcloseInfo(form)取 消/el-buttonel-button typeprimary clicksure(form)确 定/el-button/div/el-dialog!-- 分页 --el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage:hide-on-single-pagetrue:page-sizes[5, 10, 15, 30, 50]:page-sizepageSizelayouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/div
/templatescript
import { getData, changInfo, delData } from ../../utils/table;
export default {data() {return {// 表格内的总数据tableData: [],// 提示框显示隐藏dialogFormVisible: false,// 区分是新增还是修改state: true,// 提示框里input的宽formLabelWidth: 70px,// 对象的setter 如果没有属性可以创建属性再去赋值// getter 会直接去找该属性如果没有该属性报错// 提示框里的值form: {name: ,age: ,sex: ,father: ,mather: ,time: ,address: ,phone: ,},// 分页// 总条数total: 0,// 一页显示几条pageSize: 5,// 当前页currentPage: 1,};},mounted() {getData(this, /info);},computed: {compDate() {// slice(0,5)获取从0到5的值return this.tableData.slice(// 起点(this.currentPage - 1) * this.pageSize,// 终点this.currentPage * this.pageSize);},},methods: {// 每页的条数改变时触发handleSizeChange(val) {this.pageSize val;this.currentPage 1;},// 当前页数改变时触发handleCurrentChange(val) {this.currentPage val;},// 新增数据addStudent() {// 对数据进行重置this.form {name: ,age: ,sex: 1,father: ,mather: ,time: ,address: ,phone: ,};// 1. 弹出 提示框this.dialogFormVisible true;this.state true;},// 修改数据edit(row) {// 把当前修改的数据内容添加进提示框中this.form { ...row };this.dialogFormVisible true;// 切换对话框的标题this.state false;},// 取消closeInfo(form) {// 重置数据this.$refs[form].resetFields();this.dialogFormVisible false;},// 确定sure(form) {this.dialogFormVisible false;// 判断正则验证是否通过this.$refs[form].validate((valid) {if (valid) {// root, method, url, form, callbacklet method ;this.state ? (method post) : (method put);changInfo(this, method, /info, this.form, getData);}});},// 删除del(row) {delData(this, /info, row.id, getData);},},
};
/scriptstyle langscss
.infolist {.demo-form-inline,.el-form-item,.el-pagination {text-align: left;}.el-pagination {margin-top: 40px;}
}
/style
信息管理 InfoLists
在这里插入代码片templatediv classinfolist!-- 新增按钮 --el-form :inlinetrue classdemo-form-inline sizesmallel-form-itemel-button typeprimary clickaddStudent新增/el-button/el-form-item/el-form!-- 表格 --el-table :datacompDate stylewidth: 100% borderel-table-column propname label姓名 aligncenter/el-table-columnel-table-column propsex_text label性别 aligncenter/el-table-columnel-table-column propage label年龄 aligncenter/el-table-columnel-table-column propfather label父亲 aligncenter/el-table-columnel-table-column propmather label母亲 aligncenter/el-table-columnel-table-column proptime label入校时间 aligncenter/el-table-columnel-table-column propphone label联系方式 aligncenter width120/el-table-columnel-table-column propaddress label地址 /el-table-columnel-table-column aligncenter label操作 width120template slot-scopescopeel-buttontypedangersizesmalliconel-icon-editclickedit(scope.row)/el-buttonel-buttontypedangersizesmalliconel-icon-deleteclickdel(scope.row)/el-button/template/el-table-column/el-table!-- 复用的提示框 --el-dialog:titlestate ? 添加学生信息 : 修改学生信息:visible.syncdialogFormVisiblewidth500pxel-form :modelform refformel-form-item label姓名 propname :label-widthformLabelWidthel-input v-modelform.name autocompleteoff/el-input/el-form-itemel-form-item label性别 propsex :label-widthformLabelWidthel-radio v-modelform.sex label1男/el-radioel-radio v-modelform.sex label2女/el-radio/el-form-itemel-form-item label年龄 propage :label-widthformLabelWidthel-input v-modelform.age autocompleteoff/el-input/el-form-itemel-form-item label父亲 propfather :label-widthformLabelWidthel-input v-modelform.father autocompleteoff/el-input/el-form-itemel-form-item label母亲 propmather :label-widthformLabelWidthel-input v-modelform.mather autocompleteoff/el-input/el-form-itemel-form-itemlabel入校时间proptime:label-widthformLabelWidthel-date-pickerv-modelform.timetypedateformatyyyy 年 MM 月 dd 日placeholder选择日期value-formatyyyy-MM-dd/el-date-picker/el-form-itemel-form-itemlabel家庭地址propaddress:label-widthformLabelWidthel-input v-modelform.address autocompleteoff/el-input/el-form-itemel-form-itemlabel联系方式propphone:label-widthformLabelWidthel-input v-modelform.phone autocompleteoff/el-input/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickcloseInfo(form)取 消/el-buttonel-button typeprimary clicksure(form)确 定/el-button/div/el-dialog!-- 分页 --el-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage:hide-on-single-pagetrue:page-sizes[5, 10, 15, 30, 50]:page-sizepageSizelayouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/div
/templatescript
// import { infoDel } from /api/api;
import { getData, changInfo, delData } from ../../utils/table;export default {data() {return {// 表格内的总数据tableData: [],// 提示框显示隐藏dialogFormVisible: false,// 区分是新增还是修改state: true,// 提示框里input的宽formLabelWidth: 70px,// 对象的setter 如果没有属性可以创建属性再去赋值// getter 会直接去找该属性如果没有该属性报错// 提示框里的值form: {name: ,age: ,sex: ,father: ,mather: ,time: ,address: ,phone: ,},// 分页// 总条数total: 0,// 一页显示几条pageSize: 5,// 当前页currentPage: 1,};},mounted() {// 获取数据getData(this, /info);},computed: {compDate() {// slice(0,5)获取从0到5的值return this.tableData.slice(// 起点(this.currentPage - 1) * this.pageSize,// 终点this.currentPage * this.pageSize);},},methods: {// 每页的条数改变时触发handleSizeChange(val) {this.pageSize val;this.currentPage 1;},// 当前页数改变时触发handleCurrentChange(val) {this.currentPage val;},// 新增数据addStudent() {// 对数据进行重置this.form {name: ,age: ,sex: 1,father: ,mather: ,time: ,address: ,phone: ,};// 1. 弹出 提示框this.dialogFormVisible true;this.state true;},// 修改数据edit(row) {// 把当前修改的数据内容添加进提示框中this.form { ...row };this.dialogFormVisible true;// 切换对话框的标题this.state false;},// 取消closeInfo(form) {// 重置数据this.$refs[form].resetFields();this.dialogFormVisible false;},// 确定sure(form) {// 判断正则验证是否通过this.$refs[form].validate((valid) {if (valid) {// root, method, url, form, callbacklet method ;this.state ? (method post) : (method put);changInfo(this, method, /info, this.form, getData);}});},// 删除del(row) {delData(this, /info, row.id, getData);},},
};
/scriptstyle langscss
.infolist {.demo-form-inline,.el-form-item,.el-pagination {text-align: left;}.el-pagination {margin-top: 40px;}
}
/style
作业列表 WorkList
templatediv classworklistel-table :datatableData v-loadingloading border stylewidth: 100%el-table-columnpropidlabel用户IDaligncenter/el-table-columnel-table-columnpropuserId_textlabel所属班级aligncenter/el-table-columnel-table-columnproptitlelabel作业名称aligncenter/el-table-columnel-table-columnpropcompleted_textlabel完成情况aligncenter/el-table-column/el-table!-- 分页 --Page :totaltotal :urlurl/Page/div
/templatescript
import Page from /components/common/Pageing;
export default {components: { Page },data() {return {// 表格内的总数据tableData: [],// 总条数total: 0,// 加载loading: true,// 地址url: /works,};},
};
/scriptstyle/style
作业管理 WorkMenu
templatediv classworklistel-table :datatableData v-loadingloading border stylewidth: 100%el-table-columnpropidlabel用户IDaligncenter/el-table-columnel-table-columnpropuserId_textlabel所属班级aligncenter/el-table-columnel-table-columnproptitlelabel作业名称aligncenter/el-table-columnel-table-columnpropcompleted_textlabel完成情况aligncenter/el-table-column/el-table!-- 分页 --Page :totaltotal :urlurl/Page/div
/templatescript
import Page from /components/common/Pageing;
export default {components: { Page },data() {return {// 表格内的总数据tableData: [],// 总条数total: 0,// 加载loading: true,// 地址url: /works,};},
};
/scriptstyle/style
地图系列
都是home的子组件
数据概览 DataView
templatediv classdata-viewel-carddiv idmain1/div/el-cardel-carddiv idmain2/div/el-card/div
/templatescript
import { dataView } from /api/api;
export default {// echars是一棵树// 这个图标是简单还是复杂取决你在这棵树上绘制的枝干有多少// 树就是dom容器初始化挂载到dom容器上把枝干在配置进来// 枝干可以在示例中具体代码里有配置在文档中查看具体效果data() {return {};},created() {dataView().then((res) {if (res.data.status 200) {let { legend, xAxis, series } res.data.data;this.draw(legend, xAxis, series);}});},mounted() {// 1. 初始化echatrs实例并挂载到dom容器中let myChart this.$echarts.init(document.getElementById(main1));// 2. 对照着需求来逐个编写配置项(参考文档)和接收数据let option {// 标题title: {text: 会话量,},tooltip: {// 鼠标移入trigger: axis,},legend: {data: [销量],},// X轴上数据xAxis: {// 类目轴type: category,data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子],},// Y轴上数据yAxis: {type: value,},// 显示数据series: [{name: 销量,// 类型type: bar,// 是否显示柱条的背景色showBackground: true,itemStyle: {},data: [5, 20, 36, 10, 10, 20],},],};// 3. 将配置和数据添加到实例中myChart.setOption(option);},methods: {draw(leg, x_data, series_data) {let myCharts2 this.$echarts.init(document.getElementById(main2));myCharts2.setOption({title: { text: 会话量 },tooltip: {// 鼠标移入trigger: axis,},legend: {data: leg,},xAxis: {type: category,data: x_data,},yAxis: {type: value,},series: series_data,});},},
};
/scriptstyle langscss scoped
.data-view {width: 100%;display: flex;justify-content: space-between;.el-card {width: 50%;#main1,#main2 {height: 500px;}}
}
/style
二、header 头部 组件
templatediv classheaderel-headerdiv classtitle通用管理系统/divdiv{{ name }}/div/el-header/div
/templatescript
import { getToken } from /utils/setToken.js;
export default {data() {return {name: ,};},mounted() {this.name getToken(username);},
};
/scriptstyle langscss scoped
.header {.el-header {background-color: #2578b5;line-height: 60px;color: #fff;display: flex;justify-content: space-between;.title {width: 200px;font-size: 24px;}}
}
/style
二、Menu 页面
templatediv classmenuel-aside width200px!-- router可以使用路由以 index 作为 path 进行路由跳转 --!-- default-active当前激活菜单的 index --!-- background-color背景色text-color字体色active-text-color当前激活菜单的文字颜色 --el-menurouterdefault-active2classel-menu-vertical-demobackground-color#2578b5text-color#fffactive-text-color#ffd04btemplate v-for(item, index) in menus!-- 判断是否需要显示 --el-submenu :indexindex :keyindex v-if!item.hiddentemplate slottitlei :classitem.iconClass/ispan{{ item.name }}/span/templateel-menu-item-groupv-for(child, index) in item.children:keyindexel-menu-item :indexchild.pathi :classchild.iconClass/i{{ child.name }}/el-menu-item/el-menu-item-group/el-submenu/template/el-menu/el-aside/div
/templatescript
export default {data() {return {menus: [],};},mounted() {// 获取所有路由信息并添加到 menus 数组中this.menus [...this.$router.options.routes];},
};
/scriptstyle langscss scoped
.menu {::-webkit-scrollbar {display: none;}.el-aside {height: 100%;.el-menu {height: 100%;.fa {margin-right: 10px;}}.el-submenu .el-menu-item {min-width: 0;}}
}
/style
地图概览 MapView
templatediv classmap-viewdiv idmain/div/div
/templatescript
import geoJson from echarts/map/json/china;
export default {data() {return {};},mounted() {let myChart this.$echarts.init(document.getElementById(main));// 注册的是中国地图必须包括geo组件或者mep图标类型的时候才可以使用// 地图世界地图中国地图省份地图市区地图this.$echarts.registerMap(china, geoJson);myChart.setOption({// 背景色backgroundColor: rgb(121,145,200),// 配置项(组件)geo: {map: china,// 地图的长宽比例aspectScale: 0.75,// 图层zoom: 1.1,// 样式itemStyle: {// 标准normal: {// 地图区域的颜色areaColor: {type: radial,x: 0.5,y: 0.5,r: 0.8,// 颜色的步骤colorStops: [{offset: 0,color: #09132c,},{offset: 1,color: #274d68,},],// 延长作用域globalCoord: true,},// 盒子的阴影shadowColor: rgb(58,115,192),// 偏移shadowOffsetX: 10,shadowOffsetY: 11,},},region: [{name: 南海诸岛,itemStyle: {opacity: 0,},},],},series: [// 配置地图相关的数据参数{type: map,label: {normal: {// 显示文字show: true,textStyle: {color: #1DE9B6,},},emphasis: {textStyle: {color: rgb(183,185,14),},},},// 图层zoom: 1.1,map: china,itemStyle: {normal: {// 背景色backgroundColor: rgb(147,235,248),// 边框borderWidth: 1,// 区域颜色areaColor: {type: radial,x: 0.5,y: 0.5,// 文档r: 0.8,colorStops: [{ offset: 0, color: rgb(34,54,150) },{ offset: 1, color: rgb(89,128,142) },],// 全局生效globalCoord: true,},},// 高亮效果emphasis: {areaColor: rgb(46,229,206),borderWidth: 0.1,},},},],});},methods: {},
};
/scriptstyle langscss scoped
.map-view {width: 100%;#main {width: 100%;height: 600px;}
}
/style
分数地图 ScoreMap
templatediv classscore-mapdiv idmain/div/div
/templatescript
import chinaJson from echarts/map/json/china;
export default {data() {return {};},mounted() {let myChart this.$echarts.init(document.getElementById(main));this.$echarts.registerMap(china, chinaJson);var name_title 中国人民大学2017年各省市计划录取人数;var subname 数据爬取自千栀网\n\n上海、浙江无文理科录取人数;var nameColor rgb(55, 75, 113);var name_fontFamily 等线;var subname_fontSize 15;var name_fontSize 18;var mapName china;var data [{ name: 北京, value: 177 },{ name: 天津, value: 42 },{ name: 河北, value: 102 },{ name: 山西, value: 81 },{ name: 内蒙古, value: 47 },{ name: 辽宁, value: 67 },{ name: 吉林, value: 82 },{ name: 黑龙江, value: 66 },{ name: 上海, value: 24 },{ name: 江苏, value: 92 },{ name: 浙江, value: 114 },{ name: 安徽, value: 109 },{ name: 福建, value: 116 },{ name: 江西, value: 91 },{ name: 山东, value: 119 },{ name: 河南, value: 137 },{ name: 湖北, value: 116 },{ name: 湖南, value: 114 },{ name: 重庆, value: 91 },{ name: 四川, value: 125 },{ name: 贵州, value: 62 },{ name: 云南, value: 83 },{ name: 西藏, value: 9 },{ name: 陕西, value: 80 },{ name: 甘肃, value: 56 },{ name: 青海, value: 10 },{ name: 宁夏, value: 18 },{ name: 新疆, value: 67 },{ name: 广东, value: 123 },{ name: 广西, value: 59 },{ name: 海南, value: 14 },];var geoCoordMap {};var toolTipData [{name: 北京,value: [{ name: 文科, value: 95 },{ name: 理科, value: 82 },],},{name: 天津,value: [{ name: 文科, value: 22 },{ name: 理科, value: 20 },],},{name: 河北,value: [{ name: 文科, value: 60 },{ name: 理科, value: 42 },],},{name: 山西,value: [{ name: 文科, value: 40 },{ name: 理科, value: 41 },],},{name: 内蒙古,value: [{ name: 文科, value: 23 },{ name: 理科, value: 24 },],},{name: 辽宁,value: [{ name: 文科, value: 39 },{ name: 理科, value: 28 },],},{name: 吉林,value: [{ name: 文科, value: 41 },{ name: 理科, value: 41 },],},{name: 黑龙江,value: [{ name: 文科, value: 35 },{ name: 理科, value: 31 },],},{name: 上海,value: [{ name: 文科, value: 12 },{ name: 理科, value: 12 },],},{name: 江苏,value: [{ name: 文科, value: 47 },{ name: 理科, value: 45 },],},{name: 浙江,value: [{ name: 文科, value: 57 },{ name: 理科, value: 57 },],},{name: 安徽,value: [{ name: 文科, value: 57 },{ name: 理科, value: 52 },],},{name: 福建,value: [{ name: 文科, value: 59 },{ name: 理科, value: 57 },],},{name: 江西,value: [{ name: 文科, value: 49 },{ name: 理科, value: 42 },],},{name: 山东,value: [{ name: 文科, value: 67 },{ name: 理科, value: 52 },],},{name: 河南,value: [{ name: 文科, value: 69 },{ name: 理科, value: 68 },],},{name: 湖北,value: [{ name: 文科, value: 60 },{ name: 理科, value: 56 },],},{name: 湖南,value: [{ name: 文科, value: 62 },{ name: 理科, value: 52 },],},{name: 重庆,value: [{ name: 文科, value: 47 },{ name: 理科, value: 44 },],},{name: 四川,value: [{ name: 文科, value: 65 },{ name: 理科, value: 60 },],},{name: 贵州,value: [{ name: 文科, value: 32 },{ name: 理科, value: 30 },],},{name: 云南,value: [{ name: 文科, value: 42 },{ name: 理科, value: 41 },],},{name: 西藏,value: [{ name: 文科, value: 5 },{ name: 理科, value: 4 },],},{name: 陕西,value: [{ name: 文科, value: 38 },{ name: 理科, value: 42 },],},{name: 甘肃,value: [{ name: 文科, value: 28 },{ name: 理科, value: 28 },],},{name: 青海,value: [{ name: 文科, value: 5 },{ name: 理科, value: 5 },],},{name: 宁夏,value: [{ name: 文科, value: 10 },{ name: 理科, value: 8 },],},{name: 新疆,value: [{ name: 文科, value: 36 },{ name: 理科, value: 31 },],},{name: 广东,value: [{ name: 文科, value: 63 },{ name: 理科, value: 60 },],},{name: 广西,value: [{ name: 文科, value: 29 },{ name: 理科, value: 30 },],},{name: 海南,value: [{ name: 文科, value: 8 },{ name: 理科, value: 6 },],},];/*获取地图数据*/myChart.showLoading();var mapFeatures this.$echarts.getMap(mapName).geoJson.features;myChart.hideLoading();mapFeatures.forEach(function (v) {// 地区名称var name v.properties.name;// 地区经纬度geoCoordMap[name] v.properties.cp;});// console.log(geoCoordMap)// console.log(geoCoordMap)// console.log(data)// console.log(data);// console.log(toolTipData);var max 480,min 9; // todovar maxSize4Pin 100,minSize4Pin 20;var convertData function (data) {var res [];for (var i 0; i data.length; i) {var geoCoord geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value),});}}return res;};let option {title: {text: name_title,subtext: subname,x: center,textStyle: {color: nameColor,fontFamily: name_fontFamily,fontSize: name_fontSize,},subtextStyle: {fontSize: subname_fontSize,fontFamily: name_fontFamily,},},tooltip: {trigger: item,formatter: function (params) {if (typeof params.value[2] undefined) {var toolTiphtml ;for (let i 0; i toolTipData.length; i) {if (params.name toolTipData[i].name) {toolTiphtml toolTipData[i].name :br;for (let j 0; j toolTipData[i].value.length; j) {toolTiphtml toolTipData[i].value[j].name : toolTipData[i].value[j].value br;}}}// console.log(toolTiphtml);// console.log(convertData(data))return toolTiphtml;} else {let toolTiphtml ;for (let i 0; i toolTipData.length; i) {if (params.name toolTipData[i].name) {toolTiphtml toolTipData[i].name :br;for (let j 0; j toolTipData[i].value.length; j) {toolTiphtml toolTipData[i].value[j].name : toolTipData[i].value[j].value br;}}}// console.log(toolTiphtml);// console.log(convertData(data))return toolTiphtml;}},},// legend: {// orient: vertical,// y: bottom,// x: right,// data: [credit_pm2.5],// textStyle: {// color: #fff// }// },visualMap: {show: true,min: 0,max: 200,left: left,top: bottom,text: [高, 低], // 文本默认为数值文本calculable: true,seriesIndex: [1],inRange: {// color: [#3B5077, #031525] // 蓝黑// color: [#ffc0cb, #800080] // 红紫// color: [#3C3B3F, #605C3C] // 黑绿// color: [#0f0c29, #302b63, #24243e] // 黑紫黑// color: [#23074d, #cc5333] // 紫红color: [#00467F, #A5CC82], // 蓝绿// color: [#1488CC, #2B32B2] // 浅蓝// color: [#00467F, #A5CC82] // 蓝绿// color: [#00467F, #A5CC82] // 蓝绿// color: [#00467F, #A5CC82] // 蓝绿// color: [#00467F, #A5CC82] // 蓝绿},},/*工具按钮组*/// toolbox: {// show: true,// orient: vertical,// left: right,// top: center,// feature: {// dataView: {// readOnly: false// },// restore: {},// saveAsImage: {}// }// },geo: {show: true,map: mapName,label: {normal: {show: false,},emphasis: {show: false,},},roam: true,itemStyle: {normal: {areaColor: #031525,borderColor: #3B5077,},emphasis: {areaColor: #2B91B7,},},},series: [{name: 散点,type: scatter,coordinateSystem: geo,data: convertData(data),symbolSize: function (val) {return val[2] / 10;},label: {normal: {formatter: {b},position: right,show: true,},emphasis: {show: true,},},itemStyle: {normal: {color: #05C3F9,},},},{type: map,map: mapName,geoIndex: 0,aspectScale: 0.75, //长宽比showLegendSymbol: false, // 存在legend时显示label: {normal: {show: true,},emphasis: {show: false,textStyle: {color: #fff,},},},roam: true,itemStyle: {normal: {areaColor: #031525,borderColor: #3B5077,},emphasis: {areaColor: #2B91B7,},},animation: false,data: data,},{name: 点,type: scatter,coordinateSystem: geo,symbol: pin, //气泡symbolSize: function (val) {var a (maxSize4Pin - minSize4Pin) / (max - min);var b minSize4Pin - a * min;b maxSize4Pin - a * max;return a * val[2] b;},label: {normal: {show: true,textStyle: {color: #fff,fontSize: 9,},},},itemStyle: {normal: {color: #F62157, //标志颜色},},zlevel: 6,data: convertData(data),},{name: Top 5,type: effectScatter,coordinateSystem: geo,data: convertData(data.sort(function (a, b) {return b.value - a.value;}).slice(0, 5)),symbolSize: function (val) {return val[2] / 10;},showEffectOn: render,rippleEffect: {brushType: stroke,},hoverAnimation: true,label: {normal: {formatter: {b},position: right,show: true,},},itemStyle: {normal: {color: yellow,shadowBlur: 10,shadowColor: yellow,},},zlevel: 1,},],};myChart.setOption(option);},methods: {},
};
/scriptstyle langscss scoped
.score-map {width: 100%;#main {width: 100%;height: 650px;}
}
/style
旅游地图 TravelMap
templatediv classmap-viewdiv idmain/div/div
/template
!--设置一个标签标签设置宽高否则不显示引入中国地图的数据初始化echarts实例并挂载到dom中注册中国地图必须在geo或map中this.$echarts.registerMap(china, geoJson);编写配置项把配置项添加到实例中简写配置项背景色geo图层zoom长宽比例样式itemStyle)地图区域的颜色阴影阴影偏移量特点区域的样式(region)南海诸岛series相关数据的各项参数可以分为好几层层次显示用图层zoom划分1. 基础地图相关的数据参数显示文字文字颜色图层样式itemStyle)地图区域的颜色背景色边框高亮效果鼠标移入时显示样式请求数据把请求到的值points, linesData给23的data2. 配置散点图的各项参数类型type散点图气泡图使用地理坐标系配置何时显示特效(绘制完成后显示特效)标记的大小(默认为10)图层1data数据涟漪特效相关配置动画周期缩放比例波纹的绘制3. 配置线性图的各项参数类型type线性图图层2线特效的配置effect是否显示特效show特效动画的时间显示方式特效的大小拖尾的效果取值范围 0-1值越大效果越明显线的样式透明度颜色宽弯曲度data数据--
script
import geoJson from /assets/data.json;
import { travel } from /api/api;
export default {data() {return {};},mounted() {travel().then((res) {if (res.data.status 200) {let { points, linesData } res.data.data;this.draw(points, linesData);}});},methods: {draw(points, linesData) {let myChart this.$echarts.init(document.getElementById(main));// 注册的是中国地图必须包括geo组件或者mep图标类型的时候才可以使用// 地图世界地图中国地图省份地图市区地图this.$echarts.registerMap(china, geoJson);myChart.setOption({// 背景色backgroundColor: rgb(121,145,200),// 配置项(组件)geo: {map: china,// 地图的长宽比例aspectScale: 0.75,// 图层zoom: 1.1,// 样式itemStyle: {// 标准normal: {// 地图区域的颜色areaColor: {type: radial,x: 0.5,y: 0.5,r: 0.8,// 颜色的步骤colorStops: [{offset: 0,color: #09132c,},{offset: 1,color: #274d68,},],// 延长作用域globalCoord: true,},// 盒子的阴影shadowColor: rgb(58,115,192),// 偏移shadowOffsetX: 10,shadowOffsetY: 11,},},region: [{name: 南海诸岛,itemStyle: {opacity: 0,},},],},series: [// 1. 配置基础地图相关的数据参数{type: map,label: {normal: {// 显示文字show: true,textStyle: {color: #1DE9B6,},},emphasis: {textStyle: {color: rgb(183,185,14),},},},// 图层zoom: 1.1,map: china,itemStyle: {normal: {// 背景色backgroundColor: rgb(147,235,248),// 边框borderWidth: 1,// 区域颜色areaColor: {type: radial,x: 0.5,y: 0.5,// 文档r: 0.8,colorStops: [{ offset: 0, color: rgb(34,54,150) },{ offset: 1, color: rgb(89,128,142) },],// 全局生效globalCoord: true,},},// 高亮效果emphasis: {areaColor: rgb(46,229,206),borderWidth: 0.1,},},},// 2. 配置散点图的各项参数{// 散点图气泡图type: effectScatter,// 使用地理坐标系coordinateSystem: geo,// 配置何时显示特效(绘制完成后显示特效)showEffectOn: render,// 标记的大小(默认为10)symbolSize: 10,// 图层zlevel: 1,// 数据data: points,// 涟漪特效相关配置rippleEffect: {// 动画周期period: 5,// 缩放比例scale: 4,// 波纹的绘制brushType: fill,},},// 3. 配置线性图的各项参数{// 线性图type: lines,// 图层zlevel: 2,// 线特效的配置effect: {// 是否显示特效show: true,// 特效动画的时间period: 4,// 显示方式symbol: arrow,// 特效的大小symbolSize: 7,// 拖尾的效果取值范围 0-1值越大效果越明显trailLength: 0.6,},lineStyle: {normal: {color: #1DE986,width: 1,opacity: 0.4,curveness: 0.7,},},data: linesData,},],});},},
};
/scriptstyle langscss scoped
.map-view {width: 100%;height: 100%;#main {width: 100%;height: 650px;}
}
/style
三、Bread 面包屑
templatediv classbreadel-card!-- Breadcrumb 面包屑 --el-breadcrumb separator-classel-icon-arrow-rightel-breadcrumb-item :to{ path: /home }首页/el-breadcrumb-item!-- $route.matched获取当前页面的路由信息 --el-breadcrumb-itemv-for(item, index) in $route.matched:keyindexrouter-link :to{ path: item.redirect } classredirects{{ item.name }}/router-link/el-breadcrumb-item/el-breadcrumb/el-card/div
/templatescript
export default {};
/scriptstyle langscss scoped
.bread {.redirects {font-weight: 400;}
}
/style
四、Footer
templatedivel-card Frontend 2022 Csaey /el-card/div
/templatescript
export default {};
/scriptstyle/style
五 、分页器 Pageing
!-- 这里整个组件是组件化封装面试的时候不要忘了--
!-- htmlcssjs 都用上是组件化封装大部分都是内部小部分外部 --
templatediv classworkMentel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagepage:page-sizes[10, 20, 50, 100]:page-sizesizelayouttotal, sizes, prev, pager, next, jumper:totaltotal:urlurl/el-pagination/div
/templatescript
// 引入模块化封装
import { getTableData } from /utils/table;
export default {// 接收父组件传递过来的值props: {url: String,total: Number,},data() {return {// 当前页数page: 1,// 每页显示多少条size: 10,};},// 课堂任务getTableData() 调用了三次能不能封装起来已完成mounted() {// 通过接口请求数据(封装后的接口)this.getTableData();},methods: {// 每页的条数改变时触发handleSizeChange(val) {// 每页显示多少条this.size val;// 当前页数回到第一页this.page 1;// 通过接口请求数据(封装后的接口)this.getTableData();},// 当前页数改变时触发handleCurrentChange(val) {// 当前页数this.page val;// 通过接口请求数据(封装后的接口)this.getTableData();},// 通过接口请求数据(封装后的接口)getTableData() {// 模块化封装getTableData(// 传递的值this.$parent,this.url,{ page: this.page, size: this.size },[userId, completed],// 课堂练习120分// { userId: [实训, 小实训, 就业], completed: [已完成, 未完成] }// 课堂练习150分[实训, 小实训, 就业, 已完成, 未完成]);},},
};
/scriptstyle langscss
.workMent {.el-pagination {text-align: left;margin-top: 20px;}
}
/style
六、权限管理
user
templatediv classuserel-tree :datamenus show-checkbox :propsprops reftree /el-treeel-button clickgetCheckenNode通过node获取/el-button/div
/templatescript
export default {data() {return {menus: [],props: {label: name,children: children,},};},mounted() {// 获取路由的值渲染标签// 权限管理和动态路由的思路// 根据不同的用户登录上来返回对应的路由权限菜单// 一般情况下可以通过树形控件达成权限的精准控制根据不同的菜单权限// 前端将收集到的菜单数据发送给后端后端保存后// 用户在进行登录时就会查询到该用户所拥有的菜单数据返回前端在显示对应的数据// 动态添加路由使用 router.addRoutes(vue-router3.x版本方法已废弃)// 后续使用router.addRoute(进行动态路由添加)this.menus [...this.$router.options.routes];},methods: {getCheckenNode() {console.log(this.$refs.tree.getCheckedNodes());},},
};
/scriptstyle langscss scoped/style
users
templatediv classboxel-input v-modelinput placeholder请输入内容/el-inputdiv classtop reftopdivclassboxlistv-for(item, index) in lists:keyindexv-bind:style{backgroundColor: item,}clickaddcolor(item)p{{ item }}/p/div/divel-button typeprimary clickadd刷新/el-button/div
/templatescript
export default {data() {return {Number: ,lists: [],input: ,};},mounted() {// 进入时调用this.randoms();},methods: {randoms() {// 循环for (var i 0; i 24; i) {// 把获取到的值赋值给 Numberthis.Number # // 下舍入0-1随机数 乘以 255转换为16进制Math.floor(Math.random() * 255).toString(16) Math.floor(Math.random() * 255).toString(16) Math.floor(Math.random() * 255).toString(16);// 追加到 lists 中this.lists.push(this.Number);}},add() {// 点击清空 liststhis.lists [];// 调用封装函数this.randoms();},addcolor(item) {// 颜色在 input 框中显示this.input item;// 背景色改变this.$refs.top.style.backgroundColor item;},},
};
/scriptstyle langscss scoped
.box {background-color: rgb(196, 191, 191);.top {display: flex;flex-wrap: wrap;.boxlist {width: 150px;height: 150px;margin: 25px;p {width: 100%;height: 30px;background-color: #fff;line-height: 30px;}}}
}
/style 总结
上章链接《后台管理上》点击跳转 整个项目分为3篇文章 希望对大家写有帮助
