vue2脚手架可视化小项目

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号-xa>
      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
        ">johnli>
      <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>idtd>
                    <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>

你可能感兴趣的:(vue2脚手架小项目,vue)