vue2脚手架小项目
- 这个项目又数据可视化
- 可以通过点击按钮修改数据，同时图形的内容也会随着变化
- 这里面也又保存功能，搜索功能，添加功能
- 用到的框架有vue2脚手架，语言有bootstrap，css，也用了echarts
下面会先展示图片，然后再展示代码
pc端
移动端
main.js
import Vue from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.bundle.js'
import 'echarts';
import ECharts from 'vue-echarts';
import $ from 'jquery'
Vue.component($)
Vue.config.productionTip = false
Vue.component('ECharts', ECharts);
new Vue({
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this
}
}).$mount('#app')
App.vue
<template>
<div class="h-100">
<div class="first-page bg-primary py-5 pl-lg-1 text-lg-white mb-lg-2 py-lg-5 pl-lg-3">
<div class='t-c text-white'>高级管理员系统</div>
<div class="beian"><a href="https://beian.miit.gov.cn">豫ICP备xxxxxxxxxx号-x</a>
</div>
</div>
<br />
<br />
<ul class="bg-white nav-xl nav nav-pills hi-100 d-xl-flex d-flex flex-xl-column flex-column col-xl-1 bg-light">
<li class="text-xl-center text-center ml-5 mr-xl-5 t-r
"><img :src="img.url" class="rounded-circle ml-5 mr-xl-5 d-xl-block d-block" width="70" /></li>
<li class="text-xl-center text-center mr-5 ml-xl-5 d-xl-block d-xl-block t-l d-block my-xl-3 my-3
">john</li>
<li class="nav-xl-item ml-xl-3
"><a href="#bk1" data-toggle="tab"
class="nav-link nav-xl-link text-center text-xl-center active form-xl-control t-b">个人收入管理</a></li>
<li class="nav-xl-item my-xl-3 ml-xl-3
"><a href="#bk2" data-toggle="tab"
class="nav-link nav-xl-link text-center text-xl-center form-xl-control t-b">个人客户管理</a></li>
<li class="nav-xl-item ml-xl-3
"><a href="#bk3" data-toggle="tab"
class="nav-link nav-xl-link text-center text-xl-center form-xl-control t-b">个人信息管理</a>
</li>
</ul>
<div class=" tab-content">
<div class="tab-pane bg-white active" id="bk1">
<UserContent />
<e-charts class="echart" :option="option" />
<div>
<table class="table table-responsive-xl w-35 w-45 text-center">
<tr v-for="obj in shop" :key="obj.id">
<td>{{ obj.sname }}</td>
<td>{{ obj.shopprice }}</td>
<td>{{ obj.userthink }}</td>
<td>
<button class="btn btn-sm btn-primary" @click="upd(obj)">修改</button>
</td>
</tr>
</table>
<div class="modal" id="md">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">编辑信息</h4>
</div>
<div class="modal-body">
<div class="row my-3">
<div class="col-3">商品：</div>
<div class="col-9">
<input type="text" v-model="info.sname" class="form-control" />
</div>
</div>
<div class="row my-3">
<div class="col-3">价格：</div>
<div class="col-9">
<input type="number" v-model="info.shopprice" class="form-control" />
</div>
</div>
<div class="row my-3">
<div class="col-3">质量：</div>
<div class="col-9">
<input type="text" v-model="info.userthink" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" @click="save()" data-dismiss="modal">
保存
</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">
关闭
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="bk2">
<user-body />
</div>
<div class="tab-pane" id="bk3">
<user-info />
</div>
</div>
</div>
</template>
<script>
import UserContent from "./components/UserContent.vue";
import UserBody from "./components/UserBody.vue";
import UserInfo from "./components/UserInfo.vue"
import $ from 'jquery'
export default {
name: "App",
components: { UserContent, UserBody, UserInfo },
data() {
return {
statu: true,
img: { url: require("./static/img/touxiang.jpg") },
shop: [
{
sid: 1,
sname: "vivo",
shopprice: 4000,
userthink: "性价比高",
likeeither: "喜欢",
},
{
sid: 2,
sname: "LEGION",
shopprice: 10000,
userthink: "性价比高",
likeeither: "喜欢",
},
{
sid: 3,
sname: "折叠屏",
shopprice: 9000,
userthink: "性价比高",
likeeither: "喜欢",
},
{
sid: 4,
sname: "高端蓝牙耳机",
shopprice: 6000,
userthink: "性价比高",
likeeither: "喜欢",
},
{
sid: 5,
sname: "护肤品",
shopprice: 5000,
userthink: "性价比高",
likeeither: "喜欢",
},
{
sid: 6,
sname: "衣服",
shopprice: 4500,
userthink: "性价比高",
likeeither: "喜欢",
},
{
sid: 7,
sname: "鞋子",
shopprice: 3500,
userthink: "性价比高",
likeeither: "喜欢",
},
{
sid: 8,
sname: "鞋子",
shopprice: 4800,
userthink: "性价比高",
likeeither: "喜欢",
},
],
info: {
sid: 0,
sname: "",
shopprice: 0,
userthink: "",
likeeither: "",
},
sname: "",
};
},
methods: {
// getUrl() {
// axios.get('http://127.0.0.1:5500/static/img/html.html').then(
// response => {
// var str = response.data;
// str = '';
// console.log(str)
// window.location.href = 'http://127.0.0.1:5500/static/img/html.html';
// },
// error => {
// console.log(error.message)
// }
// )
// },
//修改
upd(obj) {
this.statu = false;
this.info = obj;
$("#md").modal("show")
},
save() {
// 保存设置
for (var i = 0; i <= this.shop.length; i++) {
var sname = `sname[${i}]`
localStorage.setItem(`${sname}`, this.shop[i].sname)
var shopprice = `shopprice[${i}]`
localStorage.setItem(`${shopprice}`, this.shop[i].shopprice)
var userthink = `userthink[${i}]`
localStorage.setItem(`${userthink}`, this.shop[i].userthink)
var likeeither = `likeeither[${i}]`
localStorage.setItem(`${likeeither}`, this.shop[i].likeeither)
}
}
},
computed: {
//数据可视化
option() {
return {
legend: {
top: "bottom",
},
toolbox: {
show: true,
feature: {
mark: { show: true },
},
},
series: [
{
name: "Nightingale Chart",
type: "pie",
radius: [10, 100],
center: ["50%", "50%"],
roseType: "area",
itemStyle: {
borderRadius: 8,
},
data: [
{ value: this.shop[0].shopprice, name: this.shop[0].sname },
{ value: this.shop[1].shopprice, name: this.shop[1].sname },
{ value: this.shop[2].shopprice, name: this.shop[2].sname },
{ value: this.shop[3].shopprice, name: this.shop[3].sname },
{ value: this.shop[4].shopprice, name: this.shop[4].sname },
{ value: this.shop[5].shopprice, name: this.shop[5].sname },
{ value: this.shop[6].shopprice, name: this.shop[6].sname },
{ value: this.shop[7].shopprice, name: this.shop[7].sname },
],
},
],
};
},
},
created: function () {
// 在本地存储中获取到 相对应的值
for (var i = 0; i <= this.shop.length; i++) {
var sname = `sname[${i}]`
sname = localStorage.getItem(`${sname}`);
var shopprice = `shopprice[${i}]`
shopprice = localStorage.getItem(`${shopprice}`);
var userthink = `userthink[${i}]`
userthink = localStorage.getItem(`${userthink}`);
var likeeither = `likeeither[${i}]`
likeeither = localStorage.getItem(`${likeeither}`);
if (sname != null || shopprice != null
|| userthink != null || likeeither != null) {
this.shop[i].sname = sname;
this.shop[i].shopprice = shopprice;
this.shop[i].userthink = userthink;
this.shop[i].likeeither = likeeither;
}
}
}
};
</script>
<style scoped>
.beian {
position: absolute;
bottom: -0em;
color: beige !important;
right: 6em;
}
/* 移动部分 */
@media screen and (max-width:576px) {
.beian {
position: absolute;
bottom: -72em;
right: 6em;
margin: -1em 1em;
}
.first-page {
border-bottom-left-radius: 25%;
border-bottom-right-radius: 25%;
}
.w-45 {
color: rgb(0, 0, 0);
background-color: white !important;
border-radius: 0px !important;
margin-top: -6em;
margin-left: -2em;
width: 100% !important;
}
.echart {
border-radius: 10px;
height: 350px;
width: 350px;
margin-top: 15em;
margin-left: -8em;
}
.img-first {
position: relative;
top: -29em;
left: 30em;
}
.t-r {
position: relative;
top: -5em;
left: 20px;
}
.t-l {
position: relative;
top: -5em;
left: -10px;
}
.t-b {
font-size: 16px;
position: relative;
top: -6em;
left: 1.5em;
width: 20em;
}
ul {
background-color: none;
}
.t-c {
position: absolute;
left: 2em;
font-size: 1em !important;
}
.hi-100 {
margin-left: 5em;
}
}
.table {
border-top: none !important;
}
.h-100 {
padding-bottom: -2em;
}
.t-c {
position: absolute;
top: 1em;
left: 2em;
font-size: 2em;
}
.first-page {
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
height: 2em;
}
.t-b {
font-size: 13px;
}
.hi-100 {
border-radius: 10px;
margin-left: 3em;
padding-bottom: 30em;
}
.w-35 {
background-color: white;
border-radius: 10px;
width: 25%;
position: absolute;
left: 15%;
top: 50%;
}
.echart {
border-radius: 10px;
height: 350px;
width: 350px;
position: absolute;
left: 42%;
top: 60%;
}
</style>
组件1
<template>
<div>
<e-charts class="echarts" :option="option" />
<div class='change'>
<div class="btn dro btn-primary btnn" @click="upd(obj)">点我</div>
</div>
<div class="modal" id="day">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">编辑信息</h4>
</div>
<div class="modal-body">
<div class="row my-3">
<div class="col-12">2021-01：<br> 收入<input v-model="userweek[0]" class="w-75" /><br> 消费<input
v-model="userweekx[0]" class="w-75" /></div>
<div class="col-12">2021-02：<br>收入<input v-model="userweek[1]" class="w-75" /><br> 消费<input
v-model="userweekx[1]" class="w-75" /></div>
<div class="col-12">2021-03：<br>收入<input v-model="userweek[2]" class="w-75" /><br> 消费<input
v-model="userweekx[2]" class="w-75" /></div>
<div class="col-12">2021-04：<br>收入<input v-model="userweek[3]" class="w-75" /><br> 消费<input
v-model="userweekx[3]" class="w-75" /></div>
<div class="col-12">2021-05：<br>收入<input v-model="userweek[4]" class="w-75" /><br> 消费<input
v-model="userweekx[4]" class="w-75" /></div>
<div class="col-12">2021-06：<br>收入<input v-model="userweek[5]" class="w-75" /><br> 消费<input
v-model="userweekx[5]" class="w-75" /></div>
<div class="col-12">2021-07：<br>收入<input v-model="userweek[6]" class="w-75" /><br> 消费<input
v-model="userweekx[6]" class="w-75" /></div>
<div class="col-12">2021-08：<br>收入<input v-model="userweek[7]" class="w-75" /><br> 消费<input
v-model="userweekx[7]" class="w-75" /></div>
<div class="col-12">2021-09：<br>收入<input v-model="userweek[8]" class="w-75" /><br> 消费<input
v-model="userweekx[8]" class="w-75" /></div>
<div class="col-12">2021-10：<br>收入<input v-model="userweek[9]" class="w-75" /><br> 消费<input
v-model="userweekx[9]" class="w-75" /></div>
<div class="col-12">2021-11：<br>收入<input v-model="userweek[10]" class="w-75" /><br> 消费<input
v-model="userweekx[10]" class="w-75" /></div>
<div class="col-12">2021-12：<br>收入<input v-model="userweek[11]" class="w-75" /><br> 消费<input
v-model="userweekx[11]" class="w-75" /></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" @click="save()" data-dismiss="modal">
修改
</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">
关闭
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.dro {
position: absolute;
left: 93%;
bottom: 70%;
}
.change btnn {
position: absolute;
width: 5em;
height: 5em;
border-radius: 100%;
}
.change btnn span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
/* 透明度为0.05的白色背景 */
background: rgba(255, 255, 255, 0.05);
/* 阴影 */
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
/* 上下边框 */
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
/* 圆角 */
border-radius: 30px;
color: #fff;
z-index: 1;
font-weight: 400;
/* 字间距 */
letter-spacing: 1px;
/* 去下划线 */
text-decoration: none;
/* 动画过渡 */
transition: 0.5s;
/* 溢出隐藏 */
overflow: hidden;
/* 背景模糊 */
backdrop-filter: blur(15px);
}
.change .btnn:hover span::before {
/* 沿X轴倾斜45度，向右平移200% */
transform: skewX(45deg) translateX(200%);
}
/* 制作按钮上下两个发光层 */
.change .btnn::before,
.change .btnn::after {
content: "";
/* 绝对定位，横向居中 */
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 10px;
/* 自定义颜色属性--c, 可通过var函数调用 */
/* --c: gold; */
background: var(--c);
border-radius: 5px;
box-shadow:
0 0 5px var(--c),
0 0 15px var(--c),
0 0 30px var(--c),
0 0 60px var(--c);
transition: 0.5s;
}
.change .btnn::before {
bottom: -5px;
}
.change .btnn::after {
top: -5px;
}
.change .btnn:hover::before {
bottom: 0;
}
.change .btnn:hover::after {
top: 0;
}
.change .btnn:nth-child(1)::before,
.change .btnn:nth-child(1)::after {
--c: #12c2e9;
}
.change .btnn:nth-child(2)::before,
.change .btnn:nth-child(2)::after {
--c: #c471ed;
}
.change .btnn:nth-child(3)::before,
.change .btnn:nth-child(3)::after {
--c: #f64f59;
}
.echarts {
height: 20em;
width: 100em;
}
@media screen and (max-width:576px) {
.echarts {
position: relative;
left: 73em;
top: 95em;
height: 20em !important;
width: 25em !important
}
.dro {
position: absolute;
left: 83em;
bottom: -100em
}
}
</style>
<script>
import $ from 'jquery'
export default {
name: "UserSon",
data() {
return {
colors: ['#5470C6', '#EE6666'],
userweek: [4000, 7900, 3000, 1000, 2000, 3000, 2000, 5000, 8000, 7000, 2000, 1000],
userweekx: [5000, 5000, 7000, 2000, 7000, 4000, 8000, 1000, 7000, 5000, 10000, 1000]
};
},
methods: {
upd() {
this.statu = false;
this.price = this.userweek;
$("#day").modal("show")
},
save() {
// localStorage.setItem("userweek[0]", this.userweek[0]);
for (var i = 0; i < this.userweek.length; i++) {
var userweek = `userweek[${i}]`
localStorage.setItem(`${userweek}`, this.userweek[i]);
var userweekx = `userweekx[${i}]`
localStorage.setItem(`${userweekx}`, this.userweekx[i]);
}
}
},
created: function () {
// var userweek = localStorage.getItem("userweek[0]");
// //null 对象 和 "" 有本质的区别
// if (userweek != null) {
// this.userweek[0] = userweek;
// }
for (var i = 0; i < this.userweek.length; i++) {
var userweek = `userweek[${i}]`
userweek = localStorage.getItem(`${userweek}`)
var userweekx = `userweekx[${i}]`
userweekx = localStorage.getItem(`${userweekx}`)
if (userweek != null) {
// this.userweekx[i] = userweekx;
this.userweek[i] = userweek;
}
if (userweekx != null) {
this.userweekx[i] = userweekx;
}
}
},
computed: {
option() {
return {
color: this.colors,
tooltip: {
trigger: 'none',
axisPointer: {
type: 'cross'
}
},
legend: {},
grid: {
top: 70,
bottom: 50
},
xAxis: [
{
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: this.colors[1]
}
},
axisPointer: {
label: {
formatter: function (params) {
return (
'日收入 ' +
params.value +
(params.seriesData.length ? '：' + params.seriesData[0].data : '')
);
}
}
},
data: ['2021-1', '2021-2', '2021-3', '2021-4', '2021-5', '2021-6', '2021-7', '2021-8', '2021-9', '2021-10', '2021-11', '2021-12']
},
{
type: 'category',
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: this.colors[0]
}
},
axisPointer: {
label: {
formatter: function (params) {
return (
'日消费 ' +
params.value +
(params.seriesData.length ? '：' + params.seriesData[0].data : '')
);
}
}
},
data: ['2021-1', '2021-2', '2021-3', '2021-4', '2021-5', '2021-6', '2021-7', '2021-8', '2021-9', '2021-10', '2021-11', '2021-12']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '日消费',
type: 'line',
xAxisIndex: 1,
smooth: true,
emphasis: {
focus: 'series'
},
data: [
this.userweek[0], this.userweek[1], this.userweek[2], this.userweek[3], this.userweek[4], this.userweek[5], this.userweek[6], this.userweek[7], this.userweek[8], this.userweek[9], this.userweek[10], this.userweek[11]
]
},
{
name: '日收入',
type: 'line',
smooth: true,
emphasis: {
focus: 'series'
},
data: [
this.userweekx[0], this.userweekx[1], this.userweekx[2], this.userweekx[3], this.userweekx[4], this.userweekx[5], this.userweekx[6], this.userweekx[7], this.userweekx[8], this.userweekx[9], this.userweekx[10], this.userweekx[11]
]
}
]
}
}
}
};
</script>
组件2
<template>
<div class="box">
<div class="header text-center my-2">
<h3>
个人客户管理
</h3>
<div class="headerBox pt-3">
<input type="text" v-model="search" class="form-control w-76" placeholder="请输入......">
</div>
<div class="d-lg-flex justify-lg-content-end pp">
<div class="alert alert-danger w-xl-25">
<h6>温馨提示：项目要做完之后才能换新项目</h6>
</div>
</div>
</div>
<div class="pt-5">
<table class="table table-borderless text-center">
<tr>
<td>id</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td class="none">需求</td>
<td class="none">电话</td>
<td>操作</td>
</tr>
<tr v-for="item in userdatasearch" :key="item.id">
<td>{{item.id}}</td>
<td>
<div class="badge badge-primary">{{item.name}}</div>
</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td class="none">{{item.need}}</td>
<td class="none">{{item.phone}}</td>
<td><button class="btn btn-primary" @click="del(item)">完成</button></td>
</tr>
<tr class="mt-5">
<td colspan="8" class="text-right"><button class="btn btn-primary" data-target="#customer"
data-toggle="modal">添加客户信息</button>
</td>
<div class="modal" id="customer">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">编辑信息</h4>
</div>
<div class="modal-body">
<div class="row my-3">
<div class="col-3">id:<input v-model="info.id" class="w-75" /></div>
<div class="col-9">
姓名：<input type="text" v-model="info.name" class="mb-1" /> <br />
年龄：<input type="text" v-model="info.age" class="" /> <br />
性别：<input type="text" v-model="info.sex" class="mb-1" /> <br />
需求：<input type="text" v-model="info.need" class="" /> <br />
电话：<input type="text" v-model="info.phone" class="mb-1" /> <br />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" @click="addSave()"
data-dismiss="modal">添加</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">
关闭
</button>
</div>
</div>
</div>
</div>
</div>
</tr>
</table>
</div>
<div>
</div>
</div>
</template>
<style scoped>
@media screen and (max-width:576px) {
.headerBox {
margin-left: 0em;
position: relative;
left: -35.5em;
z-index: 1;
}
.box {
width: 28em !important;
margin-top: 18em;
margin-left: -23.5em;
font-size: 13px;
height: 60em !important;
}
.pp {
margin-top: 5em;
position: relative;
top: 5em;
}
.none {
display: none;
}
}
.headerBox {
position: absolute;
left: 37em;
}
.pp {
margin-top: -3em;
}
.w-76 {
width: 20em !important;
}
.box {
background-color: #f2f4f7;
width: 77vw;
height: 85vh;
position: absolute;
top: 7em;
left: 25em;
}
</style>
<script>
export default {
name: 'UserBody',
data() {
return {
show: false,
statu: true,
search: '',
userdata: [
{ id: 1, name: "康裕", age: 25, sex: '男', need: '水果店铺网页', phone: '18795797535' },
{ id: 2, name: "韦根", age: 27, sex: '男', need: '蔬菜店铺网页', phone: '18795767535' },
{ id: 3, name: "克零", age: 23, sex: '女', need: '物理高级网页', phone: '18795757535' },
{ id: 4, name: "欧维", age: 29, sex: '男', need: '高维文明网页', phone: '18795747535' },
{ id: 5, name: "欧普", age: 30, sex: '女', need: '中文学习网页', phone: '18795727535' },
{ id: 6, name: "俄欧", age: 32, sex: '男', need: '欧洲文化网页', phone: '18795735357' },
{ id: 7, name: "同文", age: 21, sex: '女', need: '文学研讨网页', phone: '18795717535' },
{ id: 8, name: "数伟", age: 27, sex: '男', need: '数学科研网页', phone: '18795787555' },
{ id: 9, name: "理工", age: 21, sex: '男', need: '数学理工网页', phone: '18795788564' },
],
info: {
id: 0, name: "", age: 0, sex: '', need: '', phone: ''
},
}
},
methods: {
contentshow() {
if (this.show == false) {
this.show = true;
} else {
this.show = false;
}
},
del(item) {
//删除的时候就需要通过 filter来对比id的值从而删除对应的对象内容
this.userdata = this.userdata.filter(function (play) {
// console.log(play.id+' - '+item.id)
// 过滤掉相同的（id相同的删除），返回互不相同的id对象
return play.id != item.id
})
},
addSave() {
if (this.userdata.length >= 9) {
return alert('请先完成以上项目，并点击完成！')
}
this.info.id = this.userdata.length + 1;
this.userdata.push(this.info);
this.info = {
id: 0, name: "", age: 0, sex: '', need: '', phone: ''
}
for (var i = 0; i <= this.userdata.length; i++) {
var id = `id[${i}]`
localStorage.setItem(`${id}`, this.userdata[i].id)
var name = `name[${i}]`
localStorage.setItem(`${name}`, this.userdata[i].name)
var age = `age[${i}]`
localStorage.setItem(`${age}`, this.userdata[i].age)
var sex = `sex[${i}]`
localStorage.setItem(`${sex}`, this.userdata[i].sex)
var need = `need[${i}]`
localStorage.setItem(`${need}`, this.userdata[i].need)
var phone = `phone[${i}]`
localStorage.setItem(`${phone}`, this.userdata[i].phone)
}
},
},
created: function () {
for (var i = 0; i <= this.userdata.length; i++) {
var id = `id[${i}]`
id = localStorage.getItem(`${id}`);
var name = `name[${i}]`
name = localStorage.getItem(`${name}`);
var age = `age[${i}]`
age = localStorage.getItem(`${age}`);
var sex = `sex[${i}]`
sex = localStorage.getItem(`${sex}`);
var need = `need[${i}]`
need = localStorage.getItem(`${need}`);
var phone = `phone[${i}]`
phone = localStorage.getItem(`${phone}`);
if (id != null || name != null
|| age != null || sex != null) {
this.userdata[i].id = id;
this.userdata[i].name = name;
this.userdata[i].age = age;
this.userdata[i].sex = sex;
this.userdata[i].need = need;
this.userdata[i].phone = phone;
}
}
},
computed: {
userdatasearch() {
var str = this.search
return this.userdata.filter(function (item) {
return (item.name.includes(str) == true || item.need.includes(str) == true || item.sex.includes(str) == true)
})
}
}
}
</script>
组件3
<template>
<div>
<div class="d-flex flex-column space">
<div class="rate">
<user-Week />
</div>
<table id="modifies">
<tr>
<td><button class="btnn btn btn-primary my-4 w-15" @click="upd()"><span>点我</span></button></td>
</tr>
</table>
</div>
<e-charts class="echart" :option="option" />
<div class="modal" id="jd">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">编辑信息</h4>
</div>
<div class="modal-body">
<div class="row my-3">
<div class="col-3">修改月份：<input v-model="info[0].mon" class="w-75" /></div>
<div class="col-9">
本季度：<input type="text" v-model="info[0].benjidu" class="mb-1" /> <br />
上季度：<input type="text" v-model="info[0].shangjidu" class="" /> <br />
</div>
<div class="col-3">修改月份：<input v-model="info[1].mon" class="w-75" /></div>
<div class="col-9">
本季度：<input type="text" v-model="info[1].benjidu" class="mb-1" /> <br />
上季度：<input type="text" v-model="info[1].shangjidu" class="" /> <br />
</div>
<div class="col-3">修改月份：<input v-model="info[2].mon" class="w-75" /></div>
<div class="col-9">
本季度：<input type="text" v-model="info[2].benjidu" class="mb-1" /> <br />
上季度：<input type="text" v-model="info[2].shangjidu" class="" /> <br />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" @click="save()" data-dismiss="modal">
保存
</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">
关闭
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
// scoped是只可以再这个组件上用的
<style scoped>
.rate {
position: absolute;
top: -500px;
left: -1500px;
}
#modifies btnn {
width: 5em;
height: 5em;
border-radius: 100%;
}
#modifies btnn span {
position: absolute;
top: 0;
left: 7em;
width: 0%;
height: 0%;
display: flex;
justify-content: center;
align-items: center;
/* 透明度为0.05的白色背景 */
background: rgba(255, 255, 255, 0.05);
/* 阴影 */
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
/* 上下边框 */
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
/* 圆角 */
border-radius: 30px;
color: #fff;
z-index: 1;
font-weight: 400;
/* 字间距 */
letter-spacing: 1px;
/* 去下划线 */
text-decoration: none;
/* 动画过渡 */
transition: 0.5s;
/* 溢出隐藏 */
overflow: hidden;
/* 背景模糊 */
backdrop-filter: blur(15px);
}
#modifies .btnn span::before {
content: "";
/* 绝对定位 */
position: absolute;
top: 0;
left: 0em;
width: 50%;
height: 100%;
/* 渐变背景 透明到白色 */
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.15));
/* 沿X轴倾斜45度，向右平移0像素 */
transform: skewX(45deg) translateX(0);
transition: 0.5s;
}
#modifies .btnn:hover span::before {
/* 沿X轴倾斜45度，向右平移200% */
transform: skewX(45deg) translateX(200%);
}
/* 制作按钮上下两个发光层 */
#modifies .btnn::before,
#modifies .btnn::after {
content: "";
position: absolute;
left: 3em;
transform: translateX(-50%);
width: 40px;
height: 10px;
/* 自定义颜色属性--c, 可通过var函数调用 */
/* --c: gold; */
background: var(--c);
border-radius: 5px;
box-shadow:
0 0 5px var(--c),
0 0 15px var(--c),
0 0 30px var(--c),
0 0 60px var(--c);
transition: 0.5s;
}
#modifies .btnn::before {
bottom: -5px;
}
#modifies .btnn::after {
top: -5px;
}
.container .btn:hover::before,
.container .btn:hover::after {
height: 50%;
width: 80%;
border-radius: 15px;
transition-delay: 0.3s;
}
#modifies .btnn:hover::before {
bottom: 0;
}
#modifies .btnn:hover::after {
top: 0;
}
#modifies .btnn:nth-child(2)::before,
#modifies .btnn:nth-child(2)::after {
--c: #12c2e9;
}
#modifies .btnn:nth-child(1)::before,
#modifies .btnn:nth-child(1)::after {
--c: #c471ed;
}
#modifies .btnn:nth-child(3)::before,
#modifies .btnn:nth-child(3)::after {
--c: #f64f59;
}
.space {
position: absolute;
left: 88%;
top: 66%;
}
.bordr-radius {
border-radius: 10px;
}
.w-15 {
padding: 0.5em 2em;
}
.echart {
height: 350px;
width: 450px;
position: absolute;
left: 63%;
top: 60%;
}
@media screen and (max-width:576px) {
#modifies .btnn {
position: absolute;
left: -12em;
top: 55em;
}
.echart {
height: 350px;
width: 450px;
position: absolute;
left: 0em;
top: 70em;
}
}
</style>
<script>
import $ from 'jquery'
import UserWeek from './UserWeek.vue';
export default {
name: "UserContent",
components: { UserWeek },
data() {
return {
statu: true,
info: [
{ sid: 0, benjidu: 100000, shangjidu: 80000, mon: '九月' },
{ sid: 1, benjidu: 150000, shangjidu: 120000, mon: '十月' },
{ sid: 2, benjidu: 90000, shangjidu: 50000, mon: '十一月' }
],
price: { benjidu: 0, shangjidu: 0, mon: '' },
sid: "",
};
},
methods: {
upd() {
this.statu = false;
this.price = this.info;
$("#jd").modal("show")
},
save() {
for (var i = 0; i <= this.info.length; i++) {
var sid = `sid[${i}]`
localStorage.setItem(`${sid}`, this.info[i].sid)
var benjidu = `benjidu[${i}]`
localStorage.setItem(`${benjidu}`, this.info[i].benjidu)
var shangjidu = `shangjidu[${i}]`
localStorage.setItem(`${shangjidu}`, this.info[i].shangjidu)
var mon = `mon[${i}]`
localStorage.setItem(`${mon}`, this.info[i].mon)
}
}
},
created: function () {
// 在本地存储中获取到 相对应的值
for (var i = 0; i <= this.info.length; i++) {
var sid = `sid[${i}]`
sid = localStorage.getItem(`${sid}`);
var benjidu = `benjidu[${i}]`
benjidu = localStorage.getItem(`${benjidu}`);
var shangjidu = `shangjidu[${i}]`
shangjidu = localStorage.getItem(`${shangjidu}`);
var mon = `mon[${i}]`
mon = localStorage.getItem(`${mon}`);
if (sid != null || benjidu != null
|| shangjidu != null || mon != null) {
this.info[i].sid = sid;
this.info[i].benjidu = benjidu;
this.info[i].shangjidu = shangjidu;
this.info[i].mon = mon;
}
}
},
computed: {
option() {
return {
legend: {},
tooltip: {},
dataset: {
dimensions: ["product", "本季度", "上季度"],
source: [
{ product: this.info[0].mon, 本季度: this.info[0].benjidu, 上季度: this.info[0].shangjidu, },
{ product: this.info[1].mon, 本季度: this.info[1].benjidu, 上季度: this.info[1].shangjidu, },
{ product: this.info[2].mon, 本季度: this.info[2].benjidu, 上季度: this.info[2].shangjidu, },
],
},
xAxis: { type: "category" },
yAxis: {},
series: [{ type: "bar" }, { type: "bar" }],
};
},
},
};
</script>
组件4
<template>
<div>
<div class="d-flex flex-column space">
<div class="rate">
<user-Week />
</div>
<table id="modifies">
<tr>
<td><button class="btnn btn btn-primary my-4 w-15" @click="upd()"><span>点我</span></button></td>
</tr>
</table>
</div>
<e-charts class="echart" :option="option" />
<div class="modal" id="jd">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">编辑信息</h4>
</div>
<div class="modal-body">
<div class="row my-3">
<div class="col-3">修改月份：<input v-model="info[0].mon" class="w-75" /></div>
<div class="col-9">
本季度：<input type="text" v-model="info[0].benjidu" class="mb-1" /> <br />
上季度：<input type="text" v-model="info[0].shangjidu" class="" /> <br />
</div>
<div class="col-3">修改月份：<input v-model="info[1].mon" class="w-75" /></div>
<div class="col-9">
本季度：<input type="text" v-model="info[1].benjidu" class="mb-1" /> <br />
上季度：<input type="text" v-model="info[1].shangjidu" class="" /> <br />
</div>
<div class="col-3">修改月份：<input v-model="info[2].mon" class="w-75" /></div>
<div class="col-9">
本季度：<input type="text" v-model="info[2].benjidu" class="mb-1" /> <br />
上季度：<input type="text" v-model="info[2].shangjidu" class="" /> <br />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" @click="save()" data-dismiss="modal">
保存
</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">
关闭
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
// scoped是只可以再这个组件上用的
<style scoped>
.rate {
position: absolute;
top: -500px;
left: -1500px;
}
#modifies btnn {
width: 5em;
height: 5em;
border-radius: 100%;
}
#modifies btnn span {
position: absolute;
top: 0;
left: 7em;
width: 0%;
height: 0%;
display: flex;
justify-content: center;
align-items: center;
/* 透明度为0.05的白色背景 */
background: rgba(255, 255, 255, 0.05);
/* 阴影 */
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
/* 上下边框 */
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
/* 圆角 */
border-radius: 30px;
color: #fff;
z-index: 1;
font-weight: 400;
/* 字间距 */
letter-spacing: 1px;
/* 去下划线 */
text-decoration: none;
/* 动画过渡 */
transition: 0.5s;
/* 溢出隐藏 */
overflow: hidden;
/* 背景模糊 */
backdrop-filter: blur(15px);
}
#modifies .btnn span::before {
content: "";
/* 绝对定位 */
position: absolute;
top: 0;
left: 0em;
width: 50%;
height: 100%;
/* 渐变背景 透明到白色 */
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.15));
/* 沿X轴倾斜45度，向右平移0像素 */
transform: skewX(45deg) translateX(0);
transition: 0.5s;
}
#modifies .btnn:hover span::before {
/* 沿X轴倾斜45度，向右平移200% */
transform: skewX(45deg) translateX(200%);
}
/* 制作按钮上下两个发光层 */
#modifies .btnn::before,
#modifies .btnn::after {
content: "";
position: absolute;
left: 3em;
transform: translateX(-50%);
width: 40px;
height: 10px;
/* 自定义颜色属性--c, 可通过var函数调用 */
/* --c: gold; */
background: var(--c);
border-radius: 5px;
box-shadow:
0 0 5px var(--c),
0 0 15px var(--c),
0 0 30px var(--c),
0 0 60px var(--c);
transition: 0.5s;
}
#modifies .btnn::before {
bottom: -5px;
}
#modifies .btnn::after {
top: -5px;
}
.container .btn:hover::before,
.container .btn:hover::after {
height: 50%;
width: 80%;
border-radius: 15px;
transition-delay: 0.3s;
}
#modifies .btnn:hover::before {
bottom: 0;
}
#modifies .btnn:hover::after {
top: 0;
}
#modifies .btnn:nth-child(2)::before,
#modifies .btnn:nth-child(2)::after {
--c: #12c2e9;
}
#modifies .btnn:nth-child(1)::before,
#modifies .btnn:nth-child(1)::after {
--c: #c471ed;
}
#modifies .btnn:nth-child(3)::before,
#modifies .btnn:nth-child(3)::after {
--c: #f64f59;
}
.space {
position: absolute;
left: 88%;
top: 66%;
}
.bordr-radius {
border-radius: 10px;
}
.w-15 {
padding: 0.5em 2em;
}
.echart {
height: 350px;
width: 450px;
position: absolute;
left: 63%;
top: 60%;
}
@media screen and (max-width:576px) {
#modifies .btnn {
position: absolute;
left: -12em;
top: 55em;
}
.echart {
height: 350px;
width: 450px;
position: absolute;
left: 0em;
top: 70em;
}
}
</style>
<script>
import $ from 'jquery'
import UserWeek from './UserWeek.vue';
export default {
name: "UserContent",
components: { UserWeek },
data() {
return {
statu: true,
info: [
{ sid: 0, benjidu: 100000, shangjidu: 80000, mon: '九月' },
{ sid: 1, benjidu: 150000, shangjidu: 120000, mon: '十月' },
{ sid: 2, benjidu: 90000, shangjidu: 50000, mon: '十一月' }
],
price: { benjidu: 0, shangjidu: 0, mon: '' },
sid: "",
};
},
methods: {
upd() {
this.statu = false;
this.price = this.info;
$("#jd").modal("show")
},
save() {
for (var i = 0; i <= this.info.length; i++) {
var sid = `sid[${i}]`
localStorage.setItem(`${sid}`, this.info[i].sid)
var benjidu = `benjidu[${i}]`
localStorage.setItem(`${benjidu}`, this.info[i].benjidu)
var shangjidu = `shangjidu[${i}]`
localStorage.setItem(`${shangjidu}`, this.info[i].shangjidu)
var mon = `mon[${i}]`
localStorage.setItem(`${mon}`, this.info[i].mon)
}
}
},
created: function () {
// 在本地存储中获取到 相对应的值
for (var i = 0; i <= this.info.length; i++) {
var sid = `sid[${i}]`
sid = localStorage.getItem(`${sid}`);
var benjidu = `benjidu[${i}]`
benjidu = localStorage.getItem(`${benjidu}`);
var shangjidu = `shangjidu[${i}]`
shangjidu = localStorage.getItem(`${shangjidu}`);
var mon = `mon[${i}]`
mon = localStorage.getItem(`${mon}`);
if (sid != null || benjidu != null
|| shangjidu != null || mon != null) {
this.info[i].sid = sid;
this.info[i].benjidu = benjidu;
this.info[i].shangjidu = shangjidu;
this.info[i].mon = mon;
}
}
},
computed: {
option() {
return {
legend: {},
tooltip: {},
dataset: {
dimensions: ["product", "本季度", "上季度"],
source: [
{ product: this.info[0].mon, 本季度: this.info[0].benjidu, 上季度: this.info[0].shangjidu, },
{ product: this.info[1].mon, 本季度: this.info[1].benjidu, 上季度: this.info[1].shangjidu, },
{ product: this.info[2].mon, 本季度: this.info[2].benjidu, 上季度: this.info[2].shangjidu, },
],
},
xAxis: { type: "category" },
yAxis: {},
series: [{ type: "bar" }, { type: "bar" }],
};
},
},
};
</script>
