Graduation project developed based on vue2 (time cloud platform)

After a period of pondering and design, the platform has completed the basic functional requirements. You can come and take a look, which may be helpful to your design.

 Detailed video:

Graduation project developed based on vue2 (time cloud platform)

Access link: click to enter

Front-end login home page interface:

 

 Front-end registration page display interface:

 The homepage interface displayed after logging in:

Well, these are basically the front-end display. For the functions inside, you can watch the above video or click the link above to experience it yourself. Here are some of the backstage shows 

        The background login page is displayed, the account is admin, and the password is 123456:

         Background management page display function:

Part of the code (homepage part) share:

If you need all the source code, you can add QQ3534912941

<template>
  <div class="box">
<el-row>
  <el-col :span="24">
    <div class="bgc">
        <span class="headline">时光云平台</span>
       
        <ul class="nav">
            <li >主页内容</li>
            <li @click="author">作者信息</li>
            <li @click="Moreoperations">更多操作</li>
            <li >搜索</li>
        </ul>
       <ul class="navright">
        <li>用户名</li>
        <li @click="exit">退出登录</li>
       </ul>
    </div>
  </el-col>
</el-row>
<el-container>
  <el-main class="main">
    <el-row :gutter="20">
  <el-col :span="6">
    <div class="mianLeft hidden-md-and-down">
        <h3 class="personal">个人信息</h3>
    <div class="icon">
      <el-avatar :size='120' src="./img/photo.png"></el-avatar>
      <ul class="information">
        <li>账号: {
   
   {username}}</li>
        <li>邮箱: {
   
   {uesremail}}</li>
        <li>性别: <i>{
   
   {sex}}</i></li>
        <li>用户类别: 普通用户</li>
      </ul>
    </div>
   <div class="bottombtn">
     <el-button type="success" @click="dialogTableVisible = true">个人信息</el-button>
     <el-button type="success" @click="open">修改密码</el-button>
     <el-button type="success" @click="dialogVisible=true">注销账号</el-button>

   </div>
 <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            >
            <span style="margin-bottom:3%; display:block">请输入账号完成验证:</span>
                    <el-input
                type="text"
                placeholder="请输入内容"
                v-model="loginouts"
                maxlength="10"
                show-word-limit
                >

            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisibles">确 定</el-button>
            </span>
 </el-dialog>
   <el-dialog title="个人详细信息" :visible.sync="dialogTableVisible">
    <hr style="margin:0"/>
   <div>
    <label for="">昵称<i style="color:red">(若要修改请反馈管理员)</i></label>
    <el-input
  type="text"
  placeholder="请输入内容"
  v-model="nickname"
  maxlength="10"
  show-word-limit
  :disabled="true"
>

</el-input>
<div style="margin: 20px 0;"></div>
<label for="">用户ID</label>
<el-input
  type="text"
  placeholder="请输入内容"
  v-model="text"
  maxlength="10"
  show-word-limit
  :disabled="true"
>
</el-input>
<label for="" style="margin-top:3%">个人简介</label>
<el-input
  type="textarea"
  placeholder="请输入内容"
  v-model="textarea"
  maxlength="30"
  show-word-limit
>
</el-input>
<label for="" style="margin-top:3%">性别</label>
<br>
<br>
  <el-radio v-model="radio" label="1">男</el-radio>
  <el-radio v-model="radio" label="2">女</el-radio>
   </div>
    </el-dialog>
    </div>
    <div class="sqlmessage hidden-md-and-down">
        <h3>信息查询</h3>
        <div class="transaction">
            <ul>
                <li>
                    <div>
                        <img src="img/money.png" alt="">
                        <span>余额查询</span>
                        <i>+</i>
                    </div>
                </li>
                <li>
                    <div>
                        <img src="img/messag.png" alt="">
                        <span>信息查询</span>
                        <i>+</i>
                    </div>
                </li>
                <li>
                    <div>
                        <img src="img/money.png" alt="">
                        <span>余额查询</span>
                        <i>+</i>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="calendar hidden-md-and-down">
        <el-calendar class="calendars" v-model="value">
        </el-calendar>
    </div>
    <div class="announcement hidden-md-and-down">
        <h3>意见反馈</h3>
        <el-form ref="form" :model="form" label-width="80px">
    <el-input class="resize" type="textarea" placeholder="请输入您宝贵的意见" v-model="form.desc"></el-input>
  </el-form>
  <el-button class="announcementBtn" type="primary" size="mini" @click="issue">发布</el-button>
    </div>
  </el-col>
  <el-col :span="12">
    <div class="mianmid hidden-md-and-down">
       <div class="clearfix">
         <h3>我的应用</h3>
        <el-button size="small" type="success" class="floatBtn" @click="add=true">添加应用</el-button>
       </div>
        <el-dialog
            title="请您输入要添加的应用"
            :visible.sync="add"
            width="30%"
            >
            <el-input
                type="text"
                placeholder="请输入内容"
                v-model="putinto"
                maxlength="6"
                show-word-limit
                >

            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="add = false">取 消</el-button>
                <el-button type="primary" @click="adds">确 定</el-button>
            </span>
        </el-dialog>
       <div class="clearfix">
         <ul class="list">
            <li v-for="i in itemss" :key="i" @click="clicks">
                <img src="/img/office.png" alt="">
                <el-link :underline="false" class="subtitle">{
   
   {apply[i-1]}}</el-link>
            </li>
        </ul>
       </div>
    </div>
    <div class="tabs">
    <el-tabs type="border-card" class="tabsround hidden-md-and-down">
        <el-tab-pane label="喝水管理">
           <ul style="padding:0" class="clearfix" @click="drinkwater">
           <el-tooltip content="含水量:100%" placement="top" effect="light">
            <li @click="$message({
          message: '喝水成功',
          type: 'success'
        }); tableData.push({date:'水',name:'100',address:dayjss})">
                <svg class="icon water" aria-hidden="true">
                <use xlink:href="#icon-kuangquanshui"></use>
            </svg>
            <el-link :underline="false" class="drinking">水</el-link>
            </li>
           </el-tooltip>
           <el-tooltip content="含水量:90%" placement="top" effect="light">
            <li @click="$message({
          message: '喝中药成功',
          type: 'success'
        }); tableData.push({date:'中药',name:'90',address:dayjss})">
                <svg class="icon water" aria-hidden="true">
                <use xlink:href="#icon-zhongyao"></use>
                </svg>
            <el-link :underline="false" class="drinking">中药</el-link>
            </li>
            </el-tooltip>
             <el-tooltip content="含水量:91%" placement="top" effect="light">
            <li @click="$message({
          message: '喝豆浆成功',
          type: 'success'
        }); tableData.push({date:'豆浆',name:'91',address:dayjss})">
                <svg class="icon water" aria-hidden="true">
                <use xlink:href="#icon-doujiang"></use>
                </svg>
            <el-link :underline="false" class="drinking">豆浆</el-link>
            </li>
            </el-tooltip>
            <el-tooltip content="含水量:71%" placement="top" effect="light">
            <li @click="$message({
          message: '喝蜂蜜水成功',
          type: 'success'
        }); tableData.push({date:'蜂蜜水',name:'71',address:dayjss})">
                <svg class="icon water" aria-hidden="true">
                <use xlink:href="#icon-Honey"></use>
                </svg>
            <el-link :underline="false" class="drinking">蜂蜜</el-link>
            </li>
            </el-tooltip>
            <el-tooltip content="含水量:180%" placement="top" effect="light">
            <li @click="$message({
          message: '喝鸡尾酒成功',
          type: 'success'
        }); tableData.push({date:'鸡尾酒',name:'180',address:dayjss})">
                <svg class="icon water" aria-hidden="true">
                <use xlink:href="#icon-jiweijiu"></use>
                </svg>
            <el-link :underline="false" class="drinking">鸡尾酒</el-link>
            </li>
            </el-tooltip>
            <el-tooltip content="含水量:86%" placement="top" effect="light">
            <li @click="$message({
          message: '喝果汁成功',
          type: 'success'
        }); tableData.push({date:'鸡尾酒',name:'180',address:dayjss})">
                <svg class="icon water" aria-hidden="true">
                <use xlink:href="#icon-guozhi"></use>
                </svg>
            <el-link :underline="false" class="drinking">果汁</el-link>
            </li>
            </el-tooltip>
            <el-tooltip content="含水量:176%" placement="top" effect="light">
            <li @click="$message({
          message: '喝啤酒成功',
          type: 'success'
        }); tableData.push({date:'啤酒',name:'176',address:dayjss});">
                <svg class="icon water" aria-hidden="true">
                <use xlink:href="#icon-pijiu"></use>
                </svg>
            <el-link :underline="false" class="drinking">啤酒</el-link>
            </li>
            </el-tooltip>
            <el-tooltip content="含水量:86%" placement="top" effect="light">
            <li @click="$message({
          message: '喝咖啡成功',
          type: 'success'
        }); tableData.push({date:'咖啡',name:'86',address:dayjss})">
                <svg class="icon water" aria-hidden="true">
                <use xlink:href="#icon-kafei"></use>
                </svg>
            <el-link :underline="false" class="drinking">咖啡</el-link>
            </li>
            </el-tooltip>
            <el-tooltip content="含水量:96%" placement="top" effect="light">
            <li @click="$message({
          message: '喝奶茶成功',
          type: 'success'
        }); tableData.push({date:'奶茶',name:'96',address:dayjss})">
                <svg class="icon water" aria-hidden="true">
                <use xlink:href="#icon-naicha"></use>
                </svg>
            <el-link :underline="false" class="drinking">奶茶</el-link>
            </li>
            </el-tooltip>
            <el-tooltip content="含水量:95%" placement="top" effect="light">
            <li @click="$message({
          message: '喝酸奶成功',
          type: 'success'
        }); tableData.push({date:'酸奶',name:'95',address:dayjss})">
                <svg class="icon water" aria-hidden="true">
                <use xlink:href="#icon-suannai"></use>
                </svg>
            <el-link :underline="false" class="drinking">酸奶</el-link>
            </li>
            </el-tooltip>
            <el-tooltip content="含水量:89%" placement="top" effect="light">
            <li @click="$message({
          message: '喝可乐成功',
          type: 'success'
        }); tableData.push({date:'可乐',name:'89',address:dayjss})">
                <svg class="icon water" aria-hidden="true">
                <use xlink:href="#icon-kele"></use>
                </svg>
            <el-link :underline="false" class="drinking">可乐</el-link>
            </li>
            </el-tooltip>
            <el-tooltip content="含水量:70%" placement="top" effect="light">
            <li @click="$message({
          message: '喝牛奶成功',
          type: 'success'
        }); tableData.push({date:'牛奶',name:'70',address:dayjss})">
                <svg class="icon water" aria-hidden="true">
                <use xlink:href="#icon-niunai"></use>
                </svg>
            <el-link :underline="false" class="drinking">牛奶</el-link>
            </li>
            </el-tooltip>
            <el-tooltip content="含水量:80%" placement="top" effect="light">
            <li @click="$message({
          message: '喝柠檬水成功',
          type: 'success'
        }); tableData.push({date:'柠檬水',name:'80',address:dayjss})">
                <svg class="icon water" aria-hidden="true">
                <use xlink:href="#icon-shiwuningmengshui"></use>
                </svg>
            <el-link :underline="false" class="drinking">柠檬水</el-link>
            </li>
            </el-tooltip>
           </ul>
            <div class="keyindex">
                <h3>关键指标</h3>
                <ul class="clearfix" style="padding:0">
                    <li>
                        <span>喝水记录</span>
                        <div class="day"><span style="font-size:22px; font-family:'仿宋'; cursor: pointer;" @click="examine=true">点击查看</span></div>
                    </li>
                    <li>
                        <span>喝水次数</span>
                        <div class="day"><b style="font-size:22px">{
   
   {drinkingcount}}</b> 次</div>
                    </li>
                    <li>
                        <span>当月喝水量</span>
                        <div class="day"><b style="font-size:22px">{
   
   {drinkingmonthml}}</b> ml</div>
                    </li>
                    <li>
                        <span>当天喝水量</span>
                        <div class="day"><b style="font-size:22px">{
   
   {drinkingdayml}}</b> ml</div>
                    </li>
                </ul>
            </div>
            <el-dialog
            title="查看详情"
            :visible.sync="examine"
            width="50%"
            >
              <el-table
                :data="tableData"
                stripe
                style="width: 100%; max-height:450px;overflow: auto;">
                <el-table-column
                prop="date"
                label="名称"
                width="180">
                </el-table-column>
                <el-table-column
                prop="name"
                label="喝水量"
                width="180">
                </el-table-column>
                <el-table-column
                prop="address"
                label="喝水时间">
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="examine = false">取 消</el-button>
                <el-button type="primary" @click="examine = false">确 定</el-button>
            </span>
            </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="记账管理">
            <div class="totalassets">
                <h3>总资产</h3>
                <div class="summoney">{
   
   {computerasset}}</div>
                <h4 class="liabilities">负债:<b>{
   
   {incurdebts}}</b></h4>
            </div>
        <div class="capitalaccount">
            <el-collapse v-model="activeNames">
          <el-collapse-item title="资金账户" name="1" >
            <div class="Listoffunds clearfix" v-for="i in assetsaccount.length" :key="i">
                <span>{
   
   {assetsaccount[i-1].business}}</span>
                <span>{
   
   {assetsaccount[i-1].monetaryunit}}</span>
            </div>
          </el-collapse-item>
        </el-collapse>
        </div>
        <div class="Addassets" @click="keepaccounts=true"><span>+</span>添加</div>
        <el-dialog
            title="请您输入要添加的应用"
            :visible.sync="keepaccounts"
            width="30%"
            >
            <el-select class="selectpush" v-model="values" placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <br>
             <label for="" style="margin:3%">所做事务</label>
            <el-input v-model="business" placeholder="请输入内容"></el-input>
            <label for="" style="margin:3%">金额</label>
            <el-input type="text" maxlength='6' v-model.number="monetaryunit"  placeholder="请输入内容"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="keepaccounts = false">取 消</el-button>
                <el-button type="primary" @click="keepaccountss">确 定</el-button>
            </span>
        </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="生活管理">
        <div class="work">
            <footer>
                <span>生活规划表</span>
                <el-button size="mini" @click="dailyroutine=true" class="workbtn" type="primary" icon="el-icon-edit"></el-button>
            </footer>
            <ul>
                <li v-for="i in livelist2.length" :key="i">
                    <span class="workLeft">{
   
   {livelist2[i-1].starttime}}-{
   
   {livelist2[i-1].endtime}}</span>
                    <span class="workRight">{
   
   {livelist2[i-1].workcontent}}</span>
                </li>
            </ul>
        </div>
        <el-dialog
        title="编辑如下作息时间"
        :visible.sync="updataDate"
        width="35%"
        >
            <div>
                 <el-time-select
                    placeholder="起始时间"
                    v-model="startTime"
                    :picker-options="{
                    start: '00:00',
                    step: '00:15',
                    end: '24:59'
                    }">
                </el-time-select>
                <el-time-select
                    placeholder="结束时间"
                    v-model="endTime"
                    :picker-options="{
                    start: '00:00',
                    step: '00:15',
                    end: '24:59',
                    minTime: startTime
                    }">
                </el-time-select>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updataDate = false">取 消</el-button>
                <el-button type="primary" @click="updataDates">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="编辑如下作息时间"
            :visible.sync="dailyroutine"
            width="50%"
            >
            <el-button @click="addwordk" type="success" style="margin-bottom:3%;margin-left:2%" size="mini">添加</el-button>
            <div class="work" style="border-radius:15px">
            <ul>
               <li v-for="i in livelist.length" :key="i">
                    <span @click="updataDatess(i-1)"  class="workLeft">{
   
   {livelist3[i-1].starttime}}-{
   
   {livelist3[i-1].endtime}}</span>
                    <input type="text" class="workRight" v-model="livelist3[i-1].workcontent">
                    <el-button @click="deletes(i-1)" style="float:right;margin-top:3px; margin-right:3px" type="primary" size="mini" icon="el-icon-delete"></el-button>
                </li>
            </ul>
        </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dailyroutine = false">取 消</el-button>
                <el-button type="primary" @click="dailyroutines">确 定</el-button>
            </span>
        </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="日记管理">
            <mavon-editor ref="md" @save="demo" v-model="valuessss" :toolbars="markdownOption"/>
            <el-button @click="diary=true" type="success" size="small" style="margin-top:3%">发布</el-button>
            <el-dialog
            title="发布日记"
            :visible.sync="diary"
            width="35%"
            >
            <label for="" style="margin:3%">标题内容</label>
            <el-input maxlength="20" style="width:60%;margin-top:1%" v-model="titlecontent" placeholder="请输入内容"></el-input>
            <br>
            <label for="" style="margin:3%">摘要内容</label>
            <el-input minlength="30" maxlength="60" style="width:60%;margin-top:1%" v-model="abstractcontent" placeholder="请输入内容"></el-input>
            <br>
            <label  for="" style="margin:3%">作者姓名</label>
            <el-input maxlength="10" style="width:60%;margin-top:1%" v-model="authorname" placeholder="请输入内容"></el-input>
              <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="diary = false">取 消</el-button>
                <el-button size="small" type="primary" @click="diarys">确 定</el-button>
            </span>
            </el-dialog>
            <el-dialog
            title="日记内容"
            :visible.sync="alertdiary"
            width="35%"
            >
            <div v-html="journalcontent"></div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="deletediary">删除此条日记</el-button>
                <el-button size="small" @click="alertdiary = false">取 消</el-button>
                <el-button size="small" type="primary" @click="alertdiary=false">确 定</el-button>
            </span>
            </el-dialog>
            <div class="article" style="overflow:auto;">
            <ul>
                <li @click="alertdiaryy(i)" class="clearfix" v-for="i in messagecontent.length" :key="i">
                    <div class="articleimg"><img src="img/snow.jpg" alt=""></div>
                    <div class="articlecontent">
                        <article class="one">{
   
   {messagecontent[i-1].titlecontent}}</article>
                        <article class="two">{
   
   {messagecontent[i-1].abstractcontent}}</article>
                        <article class="three">{
   
   {messagecontent[i-1].authorname}}</article>
                    </div>
                </li>
            </ul>
            </div>
        </el-tab-pane>
        <el-tab-pane label="课程管理">
            <table class="coursemanagement">
                <tr>
                    <th>当前周次</th>
                    <th>节次</th>
                    <th>周一</th>
                    <th>周二</th>
                    <th>周三</th>
                    <th>周四</th>
                    <th>周五</th>
                    <th>周六</th>
                    <th>周日</th>
                </tr>
                <tr>
                    <td>11</td>
                    <td>1-2</td>
                    <td></td>
                    <td></td>
                    <td>Python程序设计 - 程新丽江夏教学楼二605单双周@1-15(周)</td>
                    <td>Python程序设计 - 程新丽江夏教学楼二605单双周@1-15(周)</td>
                    <td>Java Web应用开发 - 杨健江夏教学楼二604单双周@1-15(周)</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>11</td>
                    <td>3-4</td>
                    <td>Python程序设计 - 程新丽江夏教学楼二605单双周@1-15(周)</td>
                    <td>Java Web应用开发 - 杨健江夏教学楼二604单双周@1-15(周)</td>
                    <td>JavaScript基础 - 郝琼笃行楼707-3 物联网应用创新实训室单双周@1-15(周)</td>
                    <td>JavaScript基础 - 郝琼笃行楼707-3 物联网应用创新实训室单双周@1-15(周)</td>
                    <td>软件测试实用技术 - 廖梦虎笃行楼716-3 软件测试实训室单双周@1-15(周)</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>11</td>
                    <td>5-6</td>
                    <td>软件测试实用技术 - 廖梦虎笃行楼716-3 软件测试实训室单双周@1-15(周)</td>
                    <td>专业英语 - 苏雪江夏教学楼一406单双周@1-15(周)</td>
                    <td>软件测试实用技术 - 廖梦虎笃行楼716-3 软件测试实训室单双周@1-15(周)</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>11</td>
                    <td>7-8</td>
                    <td>专业英语 - 苏雪江夏教学楼一406单双周@1-15(周)</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
            </table>
        </el-tab-pane>
        <el-tab-pane label="生理期">作者未作</el-tab-pane>
        <el-tab-pane label="天气管理">
           <weather></weather>
        </el-tab-pane>
    </el-tabs>
    </div>
    <div class="carousel hidden-md-and-down">
        <h3 style="font-size:18px">图片欣赏</h3>
         <el-carousel :interval="4000" type="card" height="300px">
    <el-carousel-item v-for="item in imgs" :key="item.src">
      <h3 class="medium images">
        <img :src="item" alt="" >
      </h3>
    </el-carousel-item>
  </el-carousel>
    </div>
  </el-col>
  <el-col :span="6">
    <div class="mianRight clearfix hidden-md-and-down">
       <div class="clearfixs gradualchange">
         <h3>排行榜</h3>
    <el-button-group class="rank">
        <el-button size="mini" :round="true" type="primary" >个人</el-button>
        <el-button size="mini" type="primary" >本服</el-button>
        <el-button size="mini" :round="true" type="primary" >全区</el-button>
    </el-button-group>
        <span class="rankmessg">我的排名: {
   
   {place}}</span>
       </div>
       <span class="contribution">我的贡献力: {
   
   {contribution}}</span>
       <ul class="rankcontent">
        <li v-for="i in senioritys.length" :key="i">
            <span>{
   
   {i}}</span>
            <span class="headportrait"><el-avatar :size='50' src="./img/photo.png"></el-avatar></span>
            <span class="use">{
   
   {senioritys[i-1].name}}</span>
            <span class="count">{
   
   {senioritys[i-1].integral}}积分</span>
        </li>
       </ul>
    </div>
    <div class="common hidden-md-and-down">
        <h3>常见问题</h3>
        <ul class="issue">
            <li>平台的使用规则以及功能</li>
            <li>为什么有些需要权限登录</li>
            <li>还有更多等待你的发现</li>
            <li>忘记密码了该怎么办呢？</li>
        </ul>
    </div>
        <div class="messagecenter hidden-md-and-down">
            <h3>消息中心</h3>
            <ul>
                <li>我的事务: <span>0</span>条</li>
                <li>我的会议: <span>0</span>条</li>
                <li>我的通知: <span>0</span>条</li>
            </ul>
        </div>
  </el-col>
</el-row>
  </el-main>
</el-container>
  </div>
</template>

<script>
const ip = 'http://8.130.120.38:5000'
var naid;
var deleterj
//导入进度条模块
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import axios from 'axios'
import dayjs from 'dayjs'
import {nanoid} from 'nanoid'
import weather from './weather.vue'
export default {
        props:['user','email'],
        mounted(){
            this.username=this.user;
            this.uesremail=this.email;
             setInterval(() => {
                this.dayjss = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
                // console.log(dayjs(new Date()).format('HH:mm'));
             },1000);
            axios({
            url:`http://8.130.120.38:5000/getID`,
            method:"GET",
            }).then((res)=>{
                // console.log(res.data);
                this.uesremail=res.data.email;
                this.username=res.data.urename;
                this.text=this.username
            })
            axios({
            url:`http://8.130.120.38:5000/acquire`,
            method:"GET",
           }).then((res)=>{
                // console.log(res.data);
                this.assetsaccount=res.data
           },(err)=>{
                console.log("错误");
           });
           axios({
                url:`http://8.130.120.38:5000/workrequest`,
                method:"GET",
            }).then((res)=>{
                console.log("请求workrequest"+res.data);
                this.ki=res.data.ki;
                this.kj=res.data.kj;
                this.kk=res.data.kk;
                this.livelist=res.data.livelist
                this.livelist2=res.data.livelist2
                this.livelist3=res.data.livelist3
            });
            axios({
                url:`http://8.130.120.38:5000/storediarys`,
                method:"GET",
            }).then((res)=>{
                console.log("请求storediarys"+res.data);
                this.journalcontent=res.data.journalcontent;
                this.messagecontent=res.data.messagecontent
            });
            axios({
                url:`http://8.130.120.38:5000/personage`,
                method:"GET",
            }).then(res=>{
                console.log("请求personage"+res.data);
                this.sex=res.data.sex;
                this.nickname=res.data.nickname;
                this.sex=='男'?this.radio='1':this.radio='2'
            });
            axios({
                url:`http://8.130.120.38:5000/sisters`,
                method:"GET",
            }).then(res=>{
                // console.log(res.data);
                this.senioritys = res.data;
                // console.log(this.senioritys);
                // console.log(this);
            });
            //贡献力请求
            axios({
                url:`http://8.130.120.38:5000/contribution`,
                method:"GET",
            }).then(res=>{
                // console.log(res.data);
                this.contribution=res.data.integral
            });
            axios({
                    url:`http://8.130.120.38:5000/drinkwater`,
                    method:"GET",
                }).then(res=>{
                //    console.log(res.data);
                    this.tableData=res.data
                })
            // console.log(this.senioritys[0]);
        },
    data () {
        return {
            dayjss:'',
            tableData:[],
            drinkingcounts:0,
            // drinkingday:0,
            senioritys:[],
            contribution:0,
            loginouts:'',
      markdownOption: {
    bold: true, // 粗体
    italic: true, // 斜体
    header: true, // 标题
    underline: true, // 下划线
    strikethrough: true, // 中划线
    mark: true, // 标记
    superscript: true, // 上角标
    subscript: true, // 下角标
    quote: true, // 引用
    ol: true, // 有序列表
    ul: true, // 无序列表
    link: true, // 链接
    imagelink: false, // 图片链接
    code: true, // code
    table: false, // 表格
    fullscreen: true, // 全屏编辑
    readmodel: true, // 沉浸式阅读
    htmlcode: false, // 展示html源码
    help: true, // 帮助
    /* 1.3.5 */
    undo: true, // 上一步
    redo: true, // 下一步
    trash: true, // 清空
    save: true, // 保存（触发events中的save事件）
    /* 1.4.2 */
    navigation: true, // 导航目录
    /* 2.1.8 */
    alignleft: true, // 左对齐
    aligncenter: true, // 居中
    alignright: true, // 右对齐
    /* 2.2.1 */
    subfield: false, // 单双栏模式
    preview: true, // 预览
},
            sex:'',
            nickname:'',
            journalcontent:"",
            messagecontent:[],
            authorname:'',
            abstractcontent:'',
            titlecontent:'',
            valuessss:'',
            ki:0,
            kj:0,
            kk:0,
            livelist:[],
            livelist2:[],
            livelist3:[],
            startTime: '',
            endTime: '',
            username:'',
            uesremail:'',
            assetsaccount:[],
            business:"",
            monetaryunit:'',
            values:"",
             options: [
            {
            value: '支出',
            label: '支出'
             }, 
             {
            value: '收入',
            label: '收入'
             },
        ],
            itemss:1,
            putinto:"",
            apply:["办公服务"],
            radio:"1",
            textarea:123,
            text:'',
            activeNames :['2','2'],
            value: new Date(),
            form:{
                desc:""
            },
            imgs:[
                "img/1.jpg",
                "img/2.jpg",
                "img/3.jpg"
            ],
            dialogTableVisible: false,
            dialogVisible:false,
            add:false,
            keepaccounts:false,
            dailyroutine:false,
            updataDate:false,
            diary:false,
            alertdiary:false,
            examine:false
        }
    },
    methods:{
        issue(){
           if(this.form.desc==''){
            this.$message.error('还没有输入内容呢');
           }else{
                axios({
                    url:`http://8.130.120.38:5000/feedback`,
                    method:"GET",
                    params:{
                        content:this.form.desc
                    }
                })
                this.form.desc='';
                this.$message({
                message: '发布成功',
                type: 'success'
                });
           }
          
        },
        dialogVisibles(){
            this.dialogVisible = false;
            // console.log(this.loginouts);
            if(this.loginouts==this.username){
                axios({
                url:`http://8.130.120.38:5000/loginout`,
                method:"POST",
                data:{
                    username:this.username
                }
            });
            alert("已题提交后台,等待处理");
            }else{
                this.$message.error('密码验证错误');
            }  
        },
        demo(){
            console.log("deml被触发");
            console.log(this.$refs.md.d_render);
        },
        addwordk(){
            this.livelist3.push({
                starttime:'',
                endtime:'',
                workcontent:'',
            });
            this.livelist.push({
                starttime:this.livelist3[this.ki].starttime,
                endtime:this.livelist3[this.kj].endtime,
                workcontent:this.livelist3[this.kk].workcontent,
            });
            axios({
                url:`http://8.130.120.38:5000/live`,
                method:"POST",
                data:{
                    username:this.username,
                    ki:this.ki,
                    kj:this.kj,
                    kk:this.kk,
                    livelist:this.livelist,
                    livelist2:this.livelist2,
                    livelist3:this.livelist3,
                }
            })
            this.ki++;
            this.kj++;
            this.kk++;
        },
        adds(){
            this.add=false,
            this.itemss++,
            this.apply.push(this.putinto)
        },
        open(){
            this.$alert('请练联系管理员修改', '提示', {
          confirmButtonText: '确定',
        });
        },
        author(){
            this.$alert('作者也只是个前端爱好者罢了', '提示', {
          confirmButtonText: '确定',
        });
        },
        Moreoperations(){
            this.$message({
          message: '暂且没有此功能',
          type: 'success'
        });
        },
        exit(){
            NProgress.start()//显示上方进度条
            NProgress.inc() //进度条加一
            NProgress.done()//结束进度条
            setTimeout(()=>{
                this.$router.push("/login")
            },1000)
        },
        clicks(){
            this.$alert('期待作者更新吧', '提示', {
          confirmButtonText: '确定',});
        },
        keepaccountss(){
            this.keepaccounts=false;
            if(this.values=='收入'){
            this.assetsaccount.push({
                monetaryunit:this.monetaryunit,
                business:this.business
            });
            axios({
            url:`http://8.130.120.38:5000/assetsaccount`,
            method:"POST",
            data:{
                assetsaccount:this.assetsaccount,
                uersnames:this.username
            }
            })
            }else if(this.values=='支出'){
                this.assetsaccount.push({
                monetaryunit:-this.monetaryunit,
                business:this.business
            }); 
            axios({
            url:`http://8.130.120.38:5000/assetsaccount`,
            method:"POST",
            data:{
                assetsaccount:this.assetsaccount,
                uersnames:this.username
            }
            })
            }else{
                this.$message({
                message: '添加失败',
                type: 'error'
                });
            }
            this.monetaryunit='';
            this.business='';
        },
        dailyroutines(){
            // this.dailyroutine=false;
            this.$confirm('确定保存修改吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           this.dailyroutine=false;
           let k = 0;
           for(let p = 0 ; p < this.livelist3.length;p++){
                if(this.livelist3[p].starttime==''||this.livelist3[p].endtime==''||this.livelist3[p].workcontent==''){
                     this.$message.error('添加信息不能为空');
                     this.dailyroutine=true;
                     return;
                }
                this.livelist[p].starttime=this.livelist3[p].starttime
                this.livelist[p].endtime=this.livelist3[p].endtime
                this.livelist[p].workcontent=this.livelist3[p].workcontent
            }
           this.livelist.forEach(element=>{
            this.livelist2[k++]={
                starttime:element.starttime,
                endtime:element.endtime,
                workcontent:element.workcontent,
            }
           });
           axios({
                url:`http://8.130.120.38:5000/live`,
                method:"POST",
                data:{
                    username:this.username,
                    ki:this.ki,
                    kj:this.kj,
                    kk:this.kk,
                    livelist:this.livelist,
                    livelist2:this.livelist2,
                    livelist3:this.livelist3,
                }
            })
        }).catch(() => {
            this.dailyroutine=true;   
        });
        },
        deletes(id){
            this.$confirm('是否删除此条记录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            // console.log(id);
            // console.log(this.livelist3);
            this.livelist3.splice(id,1);
            this.livelist2.splice(id,1);
            this.livelist.splice(id,1);
            this.ki--;
            this.kj--;
            this.kk--;
            axios({
                url:`http://8.130.120.38:5000/live`,
                method:"POST",
                data:{
                    username:this.username,
                    ki:this.ki,
                    kj:this.kj,
                    kk:this.kk,
                    livelist:this.livelist,
                    livelist2:this.livelist2,
                    livelist3:this.livelist3,
                }
            })
        }).catch(() => {
                  
        });
        },
        updataDates(){
            this.updataDate=false;
            console.log(naid);
            this.livelist3[naid].starttime=this.startTime;
            this.livelist3[naid].endtime=this.endTime
        },
        updataDatess(id){
            naid=id;
            console.log(id);
            this.updataDate=true;
        },
        diarys(){
            this.diary=false;
            this.messagecontent.push({
                authorname:this.authorname,
                abstractcontent:this.abstractcontent,
                titlecontent:this.titlecontent
            });
            this.journalcontent=this.$refs.md.d_render;
            axios({
                url:`http://8.130.120.38:5000/diarys`,
                method:"POST",
                data:{
                    username:this.username,
                    journalcontent:this.journalcontent,
                    messagecontent:this.messagecontent
                }
            })
        },
        deletediary(){
            this.alertdiary=false;
            this.messagecontent.splice(deleterj-1,1);
            this.journalcontent='';
            axios({
                url:`http://8.130.120.38:5000/diarys`,
                method:"POST",
                data:{
                    username:this.username,
                    journalcontent:this.journalcontent,
                    messagecontent:this.messagecontent
                }
            })
        },
        alertdiaryy(id){
            this.alertdiary=true;
            deleterj=id
        },
        drinkwater(){
             axios({
                    url:`http://8.130.120.38:5000/drinking`,
                    method:'GET',
                    params:{
                        username:this.username,
                        tableData : this.tableData
                    }
                })
        }
    },
    computed:{
        computerasset(){
            let sum = 0;
            this.assetsaccount.forEach((element)=>{
                sum+=element.monetaryunit
            });
            axios({
                url:`http://8.130.120.38:5000/admincharge`,
                method:"GET",
                params:{
                    name:this.username,
                    sum:sum
                }
            })
            return sum;
        },
        incurdebts(){
            if(this.computerasset<0){
                let beindebt = ''+this.computerasset;
               return beindebt.slice(1);
            }else{
                return 0;
            }
        },
        place(){
            for(let i = 0 ; i < this.senioritys.length ; i++){
                // console.log(this.senioritys[i].name);
                // console.log(this.nickname);
                if(this.senioritys[i].name==this.nickname){
                    return i+1;
                }
            }
        },
        drinkingdayml:{
            // console.log(dayjs(new Date()).format('YYYY-MM-DD'));
            // console.log(this.tableData[0].address.substr(0,10));
            get: function(){
                let sum = 0
                for(let i = 0 ; i < this.tableData.length ; i++ ){
                    if(dayjs(new Date()).format('YYYY-MM-DD')==this.tableData[0].address.substr(0,10))
                    sum+=Number(this.tableData[i].name);
                }
                return sum;
            },
            set:function(value){
                console.log(value);
            }
        },
        drinkingmonthml:{
            get:function(){
            let sum = 0
            for(let i = 0 ; i < this.tableData.length ; i++ ){
                if(dayjs(new Date()).format('YYYY-MM')==this.tableData[0].address.substr(0,7))
                sum+=Number(this.tableData[i].name);
            }
                return sum;
            },
            set:function(value){
                console.log(value);
            }
        },
        drinkingcount:{
            get:function(){
                return this.tableData.length
            },
            set:function(value){
                console.log(value);
            }
        }
    },
    components:{
        weather
    }
}
</script>

<style scoped>
.box{
    height: 200% ;
    background-image: linear-gradient(to right, #a8edea 0%,#fff,70%, #fed6e3 100%);
}
    /* 头部开始部分 */
 .bgc{
    display: flex;
    height: 50px;
    background-color: #5a5353;
    position: relative;
    overflow: hidden;
 }
 .headline{
    font-size: 25px;
    color: #fff;
    font-family: "宋体";
    line-height: 50px;
    padding-left: 2%;
 }
 .nav{
    display: flex;
    width: 30%;

 }
 .nav li{
    cursor: pointer;
    flex: 1;
    margin-left: 10%;
    color: #fff;
    line-height: 50px;
 }
  .nav li:hover{
    color: #a8edea;
  }
 .navright{
    display: flex;
    /* margin-left: 46%; */
    position: absolute;
    right: 1%;
    width: 12%;
 }
 .navright li{
    line-height: 50px;
    color: #fff;
    margin-left: 10%;
    cursor: default;
 }

 /*主体部分 */
 /*左侧 */
 .mianLeft{
    height: 350px !important;
    background-color: #fff;
    border-radius: 20px;
 }
 .personal{
    font-family: "宋体";
    padding: 10px;
    margin: 0;
 }
.icon{
    position: relative;
    padding: 25px;
}
.information{
    position: absolute;
    
    top: 5%;
    left: 35%;
    display: flex;
    flex-direction: column;
}
.information li{
    flex: 1;
    margin-top: 20px;
}
.bottombtn{
    text-align: center;
    margin-top: 15%;
}
.sqlmessage{
    background-color: #fff;
    border-radius: 10px;
}
.sqlmessage h3{
    font-family: "宋体";
    font-size: 21px;
    padding: 15px;
}

.transaction ul{
    padding-left: 10%;
}
.transaction ul li{
    margin-top: 5%;
    width: 85%;
    height: 20%;
    background-color: #f8f8f8;
}
.transaction ul li:first-child{
     margin-top: 0;
}
.transaction ul li:last-child{
    padding-bottom: 7%;
}
.transaction ul li div span{
    margin-left: 10%;
}
.transaction ul li div i{
    float: right;
    margin-right: 5%;
    margin-top: 3%;
}
.calendar{
    border-radius: 15px;
}
.calendar .calendars{
    border-radius: 15px;
}
::v-deep .el-calendar-table thead th{
    text-align: center;
}
::v-deep .el-calendar-table tbody tr td{
    text-align: center;
}
::v-deep .el-calendar-table tbody tr td span{
    line-height: 50px;
}
 .calendar /deep/  .el-calendar-table .el-calendar-day{
    height: 60px;
  }

  .announcement{
    background-color: #fff;
    border-radius: 10px;
  }
  .announcement h3{
    padding: 15px;
    font-family: "宋体";
    font-size: 20px;
  }
  .announcement .announcementBtn{
    margin: 2% 0 2% 2%;
  }

/*中间部分 */
.mianmid{
    background-color: #fff;
    border-radius: 15px;
}
.mianmid h3{
    margin: 0;
    float: left;
    padding: 15px;
    font-family: "宋体";
    font-size: 20px;
}
.floatBtn{
    float: right;
    margin: 15px;
}

.mianmid .list li{
    float: left;
    margin-right: 5%;
    margin-top: 5%;
}
.subtitle{
    display: block;
}

.tabs{
    margin-top: 5%;
}
.tabsround{
    border-radius: 15px !important;
}
.tabsround li{
    float: left;
    padding-left: 5%;
    padding-top: 1%;
}
.water{
    font-size: 5em;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    padding: 15px;
}
.drinking{
    text-align: center;
    display: block;
    padding: 0 8px;
}
.keyindex h3{
    padding: 18px;
    font-family: "宋体";
    font-size: 20px;
}
.keyindex ul li {
    margin: 15px;
    width: 45%;
    height: 25%;
    background-color: #f8f8f8;
    border-radius: 10px;
}
.keyindex ul li .day{
    padding-top: 15%;
}

.totalassets{
    position: relative;
    height: 100px;
    background-color: #fab57e;
    border-radius: 10px ;
}
.totalassets h3{
    padding: 15px;
    color: #fff;
}
.totalassets .summoney{
    font-size: 25px;
    color: #fff;
    font-weight: 700;
    padding-left: 15px;
}
.totalassets .liabilities{
    color: #fff;
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: 5%;
}

.capitalaccount{
    margin-top: 5%;
    border-radius: 15px;
}
.Listoffunds span:first-child{
    float: left;
}
.Listoffunds span:last-child{
    margin-right: 3%;
    float: right;
    color: green;
    font-weight: 700;
}

.carousel{
    margin-top: 5%;
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
}
.el-carousel__item{
    border-radius: 10px;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 20px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
    .images{
        height: 100% !important;
    }
  .images img{
    width: 100%;
    height: 100% !important;
    /* background-size: cover; */
  }

  .Addassets{
    background-color: #e3cfcf;
    height: 5%;
    margin-top: 3%;
    padding: 15px;
    text-align: center;
    border-radius: 5px;
  }
  .Addassets span{
    margin-right: 1%;
  }
  .Addassets:hover{
    background-color: #ccc;
    cursor: pointer;
  }

  .selectpush{
    width: 25%;
  }

  .work{
    width: 100%;
    /* height: 800px; */
    background-image: linear-gradient(to top, #8de3eb 0%,#ffe4e4,70%, #b3f1a4 100%);
  }
  .work ul{
    padding: 0;
  }
  .work ul li{
    float: none;
    padding-left: 10px;
    height: 50px;
    border-radius: 10px;
    /* background-color: #ccc; */
    /* opacity: .5; */
    /* margin-top: 2%; */
  }
  .work ul li .workLeft{
    font-size: 18px;
    float: left;
    line-height: 40px;
    /* font-weight: 700; */
    color: #000;
  }
  .work ul li .workRight{
    font-size: 18px;
    float: right;
    padding-right: 2%;
    line-height: 40px;
    /* font-weight: 700; */
    color: #000;
  }
  .work ul li input{
    border: 0;
    background-color: transparent;
    outline: none;
    width: 22%;
  }
  .work ul li:hover{
    background-color: #dbd9d9;
  }
  .work footer{
    border-bottom: 1px solid #ccc;
    height: 50px;
  }
  .work footer span{
    font-family: "宋体";
    margin-left: 3%;
    font-size: 18px;
    line-height: 50px;
  }
  .work footer .workbtn{
    height: 30px !important;
    background-color: transparent !important;
    border: 0;
    color: #000 !important;
    float: right;
    line-height: 40px;
  }
   .article{
    max-height: 350px;
   }
  .article ul li{
    float: none;
    margin-top: 3%;
  }
  .article ul{
    padding: 0;
  }
  .article ul li .articleimg{
    width: 25%;
    height: 100px;
    border-radius: 10px;
    float: left;
  }
  .article ul li .articleimg img{
    width: 100%;
    border-radius: 10px;
    height: 100%;
  }
  .article ul li .articlecontent{
    float: left;
    margin-left: 3%;
    width: 72%;
    height: 100px;
    /* background-color: red; */
  }
  .article ul li .articlecontent .one{
    padding-top: 1%;
    font-weight: 800;
  }
  .article ul li .articlecontent .two{
    margin-top: 1%;
    font-family: "宋体";
  }
  .article ul li .articlecontent .three{
    margin-top: 2%;
  }
  .coursemanagement{
     width: 100%;
  }
  .coursemanagement tr{
    /* border-collapse: collapse; */
    border: 1px solid #000;
    width: 100%;
  }
  .coursemanagement tr th{
    border: 1px solid #000;
   border-collapse:collapse;
   text-align: center;
  }
    .coursemanagement tr td{
    border: 1px solid #000;
   border-collapse:collapse;
   width: 80px;
   text-align: center;
  }
/*右侧部分 */
.mianRight{
    background-color: #fff;
    border-radius: 5px;
}
.mianRight h3{
    float: left;
    margin: 0;
    font-family: "宋体";
    padding: 20px;
    font-size: 20px;
}
.mianRight .rank{
    float: right;
    margin: 15px;
}
.gradualchange{
    position: relative;
    height: 100px;
    background-image: linear-gradient(to right, #bdeae8 0%,#fff,70%, #0f9349 100%);
}
.rankmessg{
    font-size: 16px;
    position: absolute;
    left: 5%;
    top: 60%;
}

.contribution{
    font-family: "宋体";
    padding: 15px;
    font-size: 16px;
    font-weight: 800;
}
.rankcontent{
    max-height: 865px;
    overflow: hidden;
}
.rankcontent li{
    margin-top: 10%;
}
.headportrait{
    display: inline-block;
    vertical-align: middle;
    margin-left: 10%;
}
.use{
    display: inline-block;
    width: 50px;
    margin-left: 12%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.count{
     margin-left: 16%;
     font-size: 16px;
     color: blue;
}
.common{
    background-color: #fff;
    border-radius: 15px;
}
.common h3{
    padding: 10px;
    font-size: 20px;
    font-family: "宋体";
}
.common .issue li{
    padding-top: 15px;
    font-family: "宋体";
    cursor: default;
}
.common .issue li:last-child{
    padding-bottom: 15px;
}
.messagecenter{
    background-color: #fff;
    border-radius: 10px;
}
.messagecenter h3{
    padding: 15px;
    font-family: "宋体";
    font-size: 20px;
}
.messagecenter ul li{
    margin-top: 5%;
}
.messagecenter ul li:first-child{
    margin-top: 0;
}
.messagecenter ul li:last-child{
    padding-bottom: 5%;
}
.messagecenter ul li span{
    color: red;
    margin-left: 3%;
    margin-right: 3%;
}
/** */
</style>