element & echarts
2019-10-26 本文已影响0人
壞忎
<template>
<div class="index">
<!-- 头部信息 -->
<div class="title">
<span>
<el-breadcrumb separator-class="el-icon-arrow-right" separator="/">
<span style="float:left; padding:0 10px 0 5px; borderLeft:3px solid red;">当前位置:</span>
<el-breadcrumb-item :to="{ path: '/'}">登陆页面</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>使用参考</el-breadcrumb-item>
</el-breadcrumb>
</span>
<span>{{ msg }}</span>
<span style="width:280px">现在时间：{{ nowtime }}</span>
<span style="width:200px;">距离过年： <span style="color:#FF6600">{{ overtime }}</span></span>
</div> <hr>
<!-- 图表 -->
<div class="echartsview">
<div class="echarts" id="echarts"></div>
<div class="echarts" id="echartsline"></div>
</div> <hr>
<!-- 幻灯片（待改进添加图片） -->
<div class="carousel">
<div class="item">
<el-carousel trigger="hover" height="150px" arrow="always" >
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
<div class="item">
<el-carousel type="card" trigger="click" height="150px" indicator-position="outside" :interval='2000' >
<el-carousel-item v-for="item in 4" :key="item">
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
</div> <hr>
<!-- 卡片 -->
<div class="cardgroup">
<el-card shadow="always">
<div slot="header" class="clearfix">
<span>颜色选择</span>
<el-button style="float: right;" size="mini" type="primary" @click="notification('左上角', '自定义位置', 'top-left', 'success')">左上角</el-button>
</div>
<!-- 颜色选择 头像-->
<el-avatar shape="circle" :size="60" icon="el-icon-user-solid"></el-avatar>
<el-color-picker style="margin: 0 20px;" v-model="color"></el-color-picker>
<el-avatar shape="square" :size="60">zhou</el-avatar>
</el-card>
<el-card shadow="never">
<div slot="header" class="clearfix">
<span>开关按钮</span>
<el-button style="float: right;" size="mini" type="success" plain @click="notification('右上角', '自定义位置', 'top-right', 'warning')">右上角</el-button>
</div>
<!-- 开关按钮 -->
<el-switch v-model="switch_value" active-color="#13ce66" inactive-color="#ff4949" active-text="打开文字" inactive-text="关闭文字"></el-switch>
</el-card>
<el-card shadow="hover">
<div slot="header" class="clearfix">
<span>标记·提示</span>
<el-button style="float: right;" size="mini" type="warning" round @click="notification('左下角', '自定义位置', 'bottom-left', 'info')">左下角</el-button>
</div>
<!-- 鼠标悬浮提示 标记 -->
<span style="display:flex;justifyContent:space-around">
<el-tooltip effect="dark" content="可以显示数字" placement="top" >
<el-badge :value="200" :max="99" class="item"> <el-button size="small">标记</el-button> </el-badge>
</el-tooltip>
<el-tooltip effect="dark" content="可以显示小圆点" placement="top" >
<el-badge is-dot :max="99" class="item"> <el-button size="small">标记</el-button> </el-badge>
</el-tooltip>
<el-tooltip effect="dark" content="可以显示自定义内容" placement="top" >
<el-badge value="hot" class="item"> <el-button size="small">标记</el-button> </el-badge>
</el-tooltip>
</span>
</el-card>
<el-card shadow="always">
<div slot="header" class="clearfix">
<span>加载</span>
<el-button style="float: right;" size="mini" type="danger" icon="el-icon-delete" circle @click="tip('删除成功-tip', 'success', '2000')"></el-button>
<el-button style="float: right; marginRight: 10px;" size="small" type="text" @click="notification('右下角', '自定义位置', 'bottom-right', 'error')">右下角</el-button>
</div>
<!-- 加载 -->
<div v-loading="isloading" element-loading-text="正在加载中..." element-loading-spinner="el-icon-loading" element-loading-background="#ffffff" style="float: left;width:150px;padding:20px 0;textAlgin:center;backgroundColor:#eeeeee;">加载</div>
<el-button style="float: right;margin: 10px 10px 0 0" type="text" @click="isloading = false">关闭</el-button>
</el-card>
</div> <hr>
<!-- 表格 -->
<div class="table_list">
<el-table :data="exportData" stripe border :header-cell-style="RowStyle" @selection-change="selectionChange" @row-click="rowClick" :default-sort="{prop: 'date', order: 'descending'}">
<el-table-column header-align="center" align="center" type="selection" width="50" />
<el-table-column header-align="center" align="center" label="序号" type="index" width="100">
<template slot-scope="scope">
<span>{{ (currentPage - 1) * size + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="描述" prop="title" header-align="center" align="center" />
<el-table-column label="姓名" prop="userName" header-align="center" align="center" />
<el-table-column label="时间" prop="orderTime" header-align="center" align="center" sortable/>
<el-table-column header-align="center" align="center" label="状态">
<template slot-scope="scope">
<span>{{ scope.row.status === 1 ? '单身': '别想了' }}</span>
</template>
</el-table-column>
<el-table-column label="操作" header-align="center" align="center">
<template slot-scope="scope">
<el-button size="mini" type='text' @click="edit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type='warning' icon="el-icon-full-screen" plain @click="tableOpen(scope.$index, scope.row )" >弹窗</el-button>
<el-button size="mini" type='danger' icon="el-icon-delete" @click="tableDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 hide-on-single-page-->
<el-pagination
v-if="totalRecord"
:page-sizes="[5, 10, 20, 30]"
:page-size="size"
:current-page="currentPage"
:total="totalRecord"
background
layout=" total, prev, pager, next, sizes, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div> <hr>
<!-- 结合 -->
<div class="collapse">
<!-- 折叠面板 -->
<div class="item">
<el-collapse v-model="activeName" accordion>
<el-collapse-item title="一致性" name="1">
<template slot="title">
后面是自定义添加的一个图标<i class="header-icon el-icon-info"></i>
</template>
<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
</el-collapse-item>
<el-collapse-item title="反馈" name="2">
<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
</el-collapse-item>
<el-collapse-item title="效率" name="3">
<div>简化流程：设计简洁直观的操作流程；</div>
</el-collapse-item>
<el-collapse-item title="可控" name="4">
<div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
</el-collapse-item>
</el-collapse>
</div>
<!-- 标签页 -->
<div class="tiem">
<el-tabs v-model="tabsnum" tab-position="tabPosition" type="border-card" @tab-click="handleClick">
<el-tab-pane><span slot="label"><i class="el-icon-date"></i> 我的行程</span>
<el-popover placement="left" trigger="hover">
<el-calendar v-model="value" style="width:720px;"></el-calendar>
<el-button slot="reference" size="small" style="width: 150px;">查看时间</el-button>
</el-popover>
</el-tab-pane>
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs> <hr>
<el-tabs v-model="tabsnum" tab-position="bottom" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
</div>
</div> <hr>
<!-- 粘贴板 -->
<div class="copyview">
<span>这里是剪贴板的使用示例：</span>
<el-input v-model="copyinputdata" maxlength="22" show-word-limit size="small" placeholder="请输入你要进行复制的内容" />
<el-button type="primary" size="small" plain icon="el-icon-copy-document" @click="starttocopy(copyinputdata,$event)">复制文本</el-button>
</div> <hr>
<!-- 导出 -->
<div class="exporttoexcelview">
<span>这里是导出文件的示例：</span>
<el-button :loading="exportloading" plain size="small" type="primary" icon="el-icon-document" @click="exporttoexcel()">导出excel</el-button>
</div> <hr>
<!-- 提示信息 light -->
<el-alert show-icon center title="这里是提示的信息" type="success" effect="dark" :closable="true" close-text="知道了" @close="alert_hd"></el-alert>
<!-- 步骤条 -->
<el-steps :active="stepsnum" direction='horizontal' align-center style="padding:16px 0" finish-status="success">
<el-step title="买家下单" description="这个可以给他动态绑定数据" />
<el-step title="买家付款" description="时间" />
<el-step title="商家发货" description="时间" />
<el-step title="交易完成" description="时间" />
<el-step title="已评论 " description="时间" icon="el-icon-edit" />
</el-steps>
<!-- 滑块 进度条 -->
<div class="slider">
<div style="minWidth:500px;">
<el-slider v-model="slidernum" :show-tooltip="true" :step="5" show-stops> </el-slider>
<el-progress :percentage="slidernum"></el-progress> <br>
<el-progress :text-inside="true" :stroke-width="18" :percentage="slidernum" status="success"></el-progress>
</div>
<span>
<el-progress type="circle" :percentage="slidernum"></el-progress>
<el-progress type="dashboard" :percentage="slidernum" :color="slidercolors"></el-progress>
</span>
</div>
<!-- 分割线 vertical-->
<el-divider content-position="left" direction="horizontal">此分割线可横可纵，文字信息可左中右，还可以添加图标 <i class="el-icon-loading"></i></el-divider>
<!-- 表单 -->
<div class="formlist">
<div class="formcontent">
<el-form ref="form" label-position="left" :model="form" status-icon label-width="100px" :rules="rules">
<el-form-item label="用户名字" prop="username">
<el-input v-model="form.username" size="small" prefix-icon="el-icon-user" suffix-icon="el-icon-more"></el-input>
</el-form-item>
<el-form-item label="输入密码" prop="passward">
<el-input v-model="form.passward" size="small" prefix-icon="el-icon-document-remove" show-password></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="surepassward">
<el-input v-model="form.surepassward" size="small" prefix-icon="el-icon-document-checked" show-password></el-input>
</el-form-item>
<el-form-item label="年龄大小" prop="agelengths">
<el-input v-model.number="form.agelengths" size="small" prefix-icon="el-icon-tickets"></el-input>
</el-form-item>
<el-form-item label="单选按钮" prop="radiotype">
<el-radio-group v-model="form.radiotype" @change.native="radioRow(form.radiotype)">
<el-radio :label="1">男的</el-radio>
<el-radio :label="2">女的</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="多选按钮" prop="checksome">
<el-checkbox-group v-model="form.checksome">
<el-checkbox label="vue"></el-checkbox>
<el-checkbox label="react"></el-checkbox>
<el-checkbox label="jquery"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="日期时间" prop="selecttime">
<el-date-picker v-model="form.selecttime" size="small" :picker-options="pickerOptions" type="datetimerange" value-format="yyyy-MM-dd hh:mm:ss" format="yyyy-MM-dd hh:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至" />
</el-form-item>
<el-form-item label="联系方式" prop="email">
<el-input v-model="form.email" size="medium" maxlength="18" show-word-limit class="input-with-select">
<el-select v-model="category" slot="prepend" size="small" style="width:120px;backgroundColor:#ffffff;">
<el-option v-for="item in options_category" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-dropdown split-button type="primary" divided="true" slot="append" trigger="click" size="medium">立即联系
<el-dropdown-menu slot="dropdown">
<el-dropdown-item> <el-button type="text" size="small">记 下 </el-button> </el-dropdown-item>
<el-dropdown-item command="copy"> <el-button type="text" size="small"> 添 加 </el-button> </el-dropdown-item>
<el-dropdown-item command="delet"> <el-button type="text" size="small"> 删 除 </el-button> </el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- <el-button slot="append" icon="el-icon-search"></el-button> -->
</el-input>
</el-form-item>
<el-form-item label="个人介绍" >
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" placeholder="请输入信息" maxlength="200" show-word-limit v-model="form.textarea" @keyup.enter.native="form_yes('form')"></el-input>
</el-form-item>
<el-form-item> <!-- 表单在验证提交的时候，需要传入表单绑定的值对象 -->
<el-button type="warning" size="small" @click="form_no('form')">取消/重置</el-button>
<el-button type="success" size="small" @click="form_yes('form')">提交验证</el-button>
</el-form-item>
</el-form>
</div>
<div class="formother">
<!-- 打开抽屉 -->
<span style="margin-left: 20px;color:#3a4a5a">打开隐藏的抽屉: </span>
<el-button plain size="small" style="margin-left: 20px;" @click="tabletop = true">上边</el-button>
<el-button plain size="small" style="margin-left: 20px;" @click="tablebottom = true">下边</el-button>
<el-button plain size="small" style="margin-left: 20px;" @click="tableleft = true">左边</el-button>
<el-button plain size="small" style="margin-left: 20px;" @click="tableright = true">右边</el-button> <hr>
<!-- 路由传递参数 -->
<span style="margin-left: 20px;color:#3a4a5a">路由的跳转和参数的传递: </span>
<router-link :to="{name:'Login', query: {userName: userName}}">
<el-button plain size="small" style="margin-left: 20px;">按钮跳转</el-button>
</router-link>
<el-button plain size="small" style="margin-left: 20px;" @click="toOther()">方法跳转</el-button> <hr>
<!-- 打开新页面 -->
<span style="margin-left: 20px;color:#3a4a5a">打开一个新的页面：</span>
<el-button plain size="small" style="margin-left: 20px;" @click="openNew()">打开新页面</el-button>
<el-button plain size="small" style="margin-left: 20px;" @click="downImg()">下载图片</el-button> <hr>
<!-- 页头 -->
<el-page-header @back="goBack" style="marginLeft:20px" content="本页"></el-page-header> <hr>
<!-- 评分 -->
<el-rate v-model="ratevalue" show-text></el-rate> <br>
<el-rate v-model="ratevalue" disabled show-score text-color="#ff9900" score-template="{value}"> </el-rate> <hr>
<!-- 小布局 -->
<p style="margin-left: 20px;color:#3a4a5a">常用的小布局：</p>
<div class="img_show">
<img :src="url" style="height: 78px;width: 78px">
<div class="content"> <span>名称:这里是名称</span> <p>￥ 999.9</p> </div>
</div>
<div class="row"><div class="left">内容：</div><div class="right">{{ msg }}</div></div> <hr>
<!-- 回到顶部 做组件-->
</div>
</div> <hr>
<!-- 导航 :collapse="true" 收起 待改进-->
<div class="content">
<el-menu
:default-active="$route.path"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect(e)"
router>
<el-menu-item index="/home">首页</el-menu-item>
<el-menu-item index="/" :route="{path: '/templateManagementInstitution'}">设置</el-menu-item>
<el-menu-item index="/">我的</el-menu-item>
</el-menu>
</div> <br> <hr>
<!-- 弹框 -->
<el-dialog :visible.sync="dialog" width="52%" top="15vh" :show-close="true" center title="提示" :fullscreen="false" :close-on-click-modal="false">
<h5>图片展示</h5>
<!-- 图片 -->
<el-image style="width:100px;height:100px" :src="url" :preview-src-list="imageList">
<!-- 自定义加载失败内容 -->
<div slot="error" class="image-slot" style="border: 1px solid #eeeeee;textAlgin:center;">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
<el-dialog width="30%" title="内层 Dialog" :visible.sync="dialogChildren" append-to-body></el-dialog>
<div slot="footer" class="dialog-footer">
<el-button @click="dialog = false" size="small">取 消</el-button>
<el-button type="primary" @click="dialog = false" size="small">确 定</el-button>
</div>
</el-dialog>
<!-- 抽屉 -->
<el-drawer title="我嵌套了表格!" :visible.sync="tableright" direction="rtl" size="50%">
<el-table :data="exportData">
<el-table-column label="描述" prop="title" header-align="center" align="center" />
<el-table-column label="姓名" prop="userName" header-align="center" align="center" />
<el-table-column label="时间" prop="orderTime" header-align="center" align="center" sortable/>
<el-table-column header-align="center" align="center" label="状态">
<template slot-scope="scope">
<span>{{ scope.row.status === 1 ? '单身': '别想了' }}</span>
</template>
</el-table-column>
</el-table>
</el-drawer>
<el-drawer title="我嵌套了表格!" :visible.sync="tableleft" direction="ltr" size="50%">
<el-table :data="exportData">
<el-table-column label="描述" prop="title" header-align="center" align="center" />
<el-table-column label="姓名" prop="userName" header-align="center" align="center" />
<el-table-column label="时间" prop="orderTime" header-align="center" align="center" sortable/>
<el-table-column header-align="center" align="center" label="状态">
<template slot-scope="scope">
<span>{{ scope.row.status === 1 ? '单身': '别想了' }}</span>
</template>
</el-table-column>
</el-table>
</el-drawer>
<el-drawer title="我嵌套了表格!" :visible.sync="tabletop" direction="ttb" size="50%">
<el-table :data="exportData">
<el-table-column label="描述" prop="title" header-align="center" align="center" />
<el-table-column label="姓名" prop="userName" header-align="center" align="center" />
<el-table-column label="时间" prop="orderTime" header-align="center" align="center" sortable/>
<el-table-column header-align="center" align="center" label="状态">
<template slot-scope="scope">
<span>{{ scope.row.status === 1 ? '单身': '别想了' }}</span>
</template>
</el-table-column>
</el-table>
</el-drawer>
<el-drawer title="我嵌套了表格!" :visible.sync="tablebottom" direction="btt" size="50%">
<el-table :data="exportData">
<el-table-column label="描述" prop="title" header-align="center" align="center" />
<el-table-column label="姓名" prop="userName" header-align="center" align="center" />
<el-table-column label="时间" prop="orderTime" header-align="center" align="center" sortable/>
<el-table-column header-align="center" align="center" label="状态">
<template slot-scope="scope">
<span>{{ scope.row.status === 1 ? '单身': '别想了' }}</span>
</template>
</el-table-column>
</el-table>
</el-drawer>
</div>
</template>
<script>
import { nowTime, Countdown } from '@/utils/time'
import clip from '@/utils/clipboard' // 复制引用
export default {
name: 'Antip',
components: {}, // 存放导入的组件 DialogProduct
// 子组件接受值, 在使用的时候可以直接传递方法
// <DialogProduct :product-id="this.id" :up-data-list="getList()" /><br>
props: {
productId: {
type: Number,
default: () => {
return 1
}
},
upDataList: {
type: Function,
default: () => {
return () => {}
}
}
},
data () { // 存放数据
// 自定义验证规则
var passOne = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'))
} else {
if (this.form.passward !== '') {
this.$refs.form.validateField('checkPass')
}
callback()
}
}
var passTwo = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'))
} else if (value !== this.form.passward) {
callback(new Error('两次输入密码不一致!'))
} else {
callback()
}
}
var age = (rule, value, callback) => {
if (!value) {
return callback(new Error('年龄不能为空'))
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'))
} else {
if (value < 18 || value > 200) {
callback(new Error('必须年满18岁，同时小于200岁'))
} else {
callback()
}
}
}, 1000)
}
return {
msg: '一些使用示范用做参考',
nowtime: '2222年12月22日 22:22:22', // 时间
overtime: '00:00:00', // 倒计时
copyinputdata: '我是即将被复制的内容', // 要复制的内容
dialog: false, // 弹框
dialogChildren: false, // 子弹框
url: 'http://imgtest.icjsq.com/cjsq_img/common/atsh_w2870_h4313_6b6aca0f95144395896d4746182ae376.jpg', // 图片
imageList: ['http://imgtest.icjsq.com/cjsq_img/common/atsh_w2870_h4313_6b6aca0f95144395896d4746182ae376.jpg'], // 图片预览
tabletop: false, // 抽屉
tablebottom: false, // 抽屉
tableleft: false, // 抽屉
tableright: false, // 抽屉
// 导航
activeName: '3', // 折叠面板默认打开;
stepsnum: 3, // 步骤条
tabsnum: 'second', // 选项卡也默认
tabPosition: 'top', // 选项卡位置
slidernum: 34, // 滑块；进度条
slidercolors: 'red', // 进度条颜色
switch_value: false, // 开关
color: '#C63C3C', // 颜色选择器的颜色
isloading: true, // 加载
value: new Date(), // 日历
userName: 'zhouzip', // 路由传递参数
getUserName: '', // 得到的路由参数
ratevalue: 3.7, // 评分数据null
exportloading: false, // 导出缓冲
exportData: [ // 获取的要导出数据
{
orderNum: '15933432526',
orderTime: '2019-11-11',
title: '帅哥',
userName: 'zhouzip',
merchantName: '中国',
status: 1,
returnMoneyTime: '--'
}
],
exportlist: [], // 导出的数据存放
tableData: [], // 表格
size: 10, // 每页的数据条数
totalRecord: 100, // 初始共00条数据，其实没有，等接口返回,总条数
currentPage: 1, // 当前导航页数的默认页数
// 下拉框
category: '1',
options_category: [
{
value: '1',
label: '微信'
},
{
value: '2',
label: 'qq'
},
{
value: '3',
label: '邮箱'
}
],
// 表单
form: {
username: '',
passward: '',
surepassward: '',
agelengths: '',
radiotype: '',
checksome: [],
selecttime: '', // 时间,数组的形式,time[0],time[1]
email: ''
},
// 在自定义规则的时候，需要在data外定义，定义好之后和其他验证规则一样，只需要引入即可
// 验证规则中，要指定验证内容的类型，多选array，时间date，邮箱email, 数字number
// trigger的意思是怎么触发这个验证,可以叠加 使用数组
rules: {
username: [ // 输入框
{ required: true, message: '请填写用户名字', trigger: 'blur' },
{ min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
],
passward: [
{ required: true, validator: passOne, trigger: 'blur' }
],
surepassward: [
{ required: true, validator: passTwo, trigger: 'blur' }
],
agelengths: [
{ required: true, validator: age, trigger: 'blur' }
],
radiotype: [
{ required: true, message: '请选择正确的性别', trigger: 'change' }
],
checksome: [
{ type: 'array', required: true, message: '请至少选择一项技能', trigger: 'change' }
],
selecttime: [
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
email: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
]
},
// 时间快捷方式
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick (picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
}
}
},
filters: {}, // 过滤器
computed: {
// 判断本页路由
toChildren: function () {
if (this.$route.path === '/antip') return false
return true
}
}, // 计算属性
watch: { // 监听
// 表格每一行中插入一行
tableData (newValue, oldValue) {
if (this.$route.path === '/auction/auctionorder/auctiondepositorder') {
this.$nextTick(function () {
var _parent1 = document
.getElementsByClassName('el-table__body')[0]
.getElementsByTagName('tbody')[0]
var chil = document.getElementsByClassName('newAdd').length
for (var x = 0; x < chil; x++) {
_parent1.removeChild(document.getElementsByClassName('newAdd')[0])
}
if (this.tableData !== null) {
console.log('执行了吗')
for (var j = 0; j < this.tableData.length; j++) {
// 记住选择tr
var _parent = document
.getElementsByClassName('el-table__body')[0]
.getElementsByTagName('tbody')[0]
var _child = document
.getElementsByClassName('el-table__body')[0]
.getElementsByTagName('tr')[j]
var newChild = document.createElement('div')
newChild.style.width = '1500px'
newChild.style.fontSize = 14 + 'px'
newChild.style.textIndent = 2 + 'rem'
newChild.style.lineHeight = 50 + 'px'
newChild.style.wordSpacing = 37 + 'px'
newChild.className = 'newAdd'
newChild.innerHTML =
' 订单号：' +
this.tableData[j].nine +
' 缴纳时间：' +
this.tableData[j].ten +
'<button style="border-radius:3px;color:#409EFF;background-color:#409EFF30;border:1px solid #409EFF50;">' +
(this.tableData[j].orderSource === 0
? 'APP'
: this.tableData[j].orderSource === 1
? '小程序'
: this.tableData[j].orderSource === 2
? 'H5'
: '暂无数据') +
'</button>' +
'<i style="float:right;font-size:26px;margin-top:10px;color:' +
(this.tableData[j].colorMark === 0
? 'rgb(236, 128, 141)'
: this.tableData[j].colorMark === 1
? 'rgb(245, 154, 35)'
: this.tableData[j].colorMark === 2
? 'rgb(2, 167, 240)'
: this.tableData[j].colorMark === 3
? 'rgb(112, 182, 3)'
: this.tableData[j].colorMark === 4
? 'rgb(194, 128, 255)'
: 'white') +
'" class="el-icon-s-flag"></i>'
_parent.insertBefore(newChild, _child)
}
}
})
}
}
},
directives: {}, // 指令
beforeCreate () {},
created () {},
beforeMount () {},
mounted () {
// this.getTimes() // 获取时间
// this.getOverTime() // 倒计时
this.drawChart() // 图表绘制
this.drawChartLine() // 图表绘制
this.getParams() // 得到路由参数
},
beforeUpdate () {},
updated () {},
beforeDestroy () {},
destroyed () {},
methods: { // 方法
// 消息提示
tip (message, type, time) {
this.$message({
message: message,
type: type,
duration: time
})
},
// 消息弹框
notification (title, message, position, type) {
this.$notify({
title: title,
message: message,
position: position,
type: type,
showClose: false
})
},
// 路由跳转
toOther () {
this.$router.push({
name: 'Login',
query: {
userName: this.userName
}
})
},
// 得到路由参数
getParams () {
const routerParamsuserName = this.$route.query.userName
this.getUserName = routerParamsuserName
},
// 页面返回
goBack () {
this.$router.push({
name: 'Home'
})
},
// 导航、
handleSelect (e) {
console.log(e)
},
// 表格弹框
tableOpen () {
this.dialog = true
},
// 表格删除
tableDelete () {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示标题', {
confirmButtonText: '确定',
cancelButtonText: '取消',
center: 'true',
type: 'warning'
})
.then(() => {
this.$alert('真的要删除吗？', '确认删除', {
confirmButtonText: '确定',
center: 'true',
callback: action => {
this.$prompt('请输入邮箱', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
center: 'true',
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
inputErrorMessage: '邮箱格式不正确'
})
.then(({ value }) => { this.tip(value, 'success', '2000') })
.catch(() => {})
}
})
})
.catch(() => {})
},
// 标签页点击方法
handleClick (tab) {
console.log(tab)
},
// 提示信息关闭回调-alert
alert_hd () {},
// 单选变化
radioRow (e) {
console.log(e)
},
// 表单验证的关闭和提交验证
form_no (form) {
// clearValidate 只是移除检验的结果
this.$refs[form].resetFields()
setTimeout(() => { this.tip('取消/重置', 'warning', '2000') }, 200)
},
form_yes (form) {
this.$refs[form].validate((valid) => {
if (valid) {
setTimeout(() => { this.tip('提交验证成功', 'success', '2000') }, 200)
} else {
return false
}
})
},
// 表格表头样式
RowStyle ({ row, rowIndex }) {
return 'color:#3a4a5a;backgroundColor: #eee;'
},
// 表格一行点击的时候
rowClick (row) {
console.log(row)
},
// 表格多选方法
selectionChange (e) {
console.log(e)
},
// 分页
handleSizeChange (e) {
this.size = e
},
handleCurrentChange (e) {
this.currentPage = e
},
// 表格行按钮
edit (index, row) {
console.log(index, row)
},
// 获取现在的实时时间
getTimes () {
setInterval(() => {
this.nowtime = nowTime()
}, 1000)
},
// 倒计时 传入值格式：'2020/01/25 00:00:00'
getOverTime () {
var intervalOvertime = setInterval(() => {
this.overtime = Countdown('2020/01/25 00:00:00')
var date = (new Date('2020/01/25 00:00:00')) - (new Date())
if (date === 0 || date < 0) {
clearInterval(intervalOvertime)
}
}, 1000)
},
// 剪贴板的使用
starttocopy (text, event) {
clip(text, event)
},
// 表格导出
exporttoexcel () {
this.exportloading = true
var tableArray = this.exportData
for (var i = 0; i < tableArray.length; i++) {
const obj = {
orderNum: tableArray[i].orderNum,
orderTime: tableArray[i].orderTime,
title: tableArray[i].title,
userName: tableArray[i].userName,
merchantName: tableArray[i].merchantName,
status: tableArray[i].status === 1 ? '已缴纳' : tableArray[i].status === 2 ? '已释放' : tableArray[i].status === 3 ? '已转尾款' : '',
returnMoneyTime: tableArray[i].returnMoneyTime
}
this.exportlist.push(obj)
}
console.log(this.exportData, '导出', this.exportlist)
import('@/utils/exportExel').then(excel => {
const tHeader = ['保证金订单号', '缴纳时间', '拍品名称', '买家名称', '供应商', '保证金状态', '退款时间']
const filterVal = ['orderNum', 'orderTime', 'title', 'userName', 'merchantName', 'status', 'returnMoneyTime']
const list = this.exportlist
const data = this.formatJson(filterVal, list)
excel.export_json_to_excel({
header: tHeader,
data: data,
filename: '资金订单',
autoWidth: true,
bookType: 'xlsx'
})
this.exportloading = false
this.exportlist = []
})
},
formatJson (filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => {
return v[j]
}))
},
// 打开新页面
openNew () {
var a = document.createElement('a') // 生成一个a元素
var event = new MouseEvent('click') // 创建一个单击事件
a.target = '_blank'
a.href = this.url // 将生成的URL设置为a.href属性
a.dispatchEvent(event) // 触发a的单击事件
},
// 点击下载
downImg () {
this.downloadIamge('this.url', '图片下载')
window.open(this.url) // 这个是直接打开新地址的
console.log(this.url)
},
downloadIamge (imgsrc, name) { // 下载图片地址和图片名
var image = new Image()
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous')
image.onload = function () {
var canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
var context = canvas.getContext('2d')
context.drawImage(image, 0, 0, image.width, image.height)
var url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
var a = document.createElement('a') // 生成一个a元素
var event = new MouseEvent('click') // 创建一个单击事件
a.download = name || 'photo' // 设置图片名称
a.href = url // 将生成的URL设置为a.href属性
a.dispatchEvent(event) // 触发a的单击事件
}
image.src = imgsrc + '?time=' + new Date().valueOf()
},
// 图表
drawChart () {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('echarts'), 'dark') // 修改主题
let option = {
backgroundColor: '#2c343c', // 背景颜色
textStyle: { // 字体颜色
color: 'rgba(255, 255, 255, 0.3)'
},
labelLine: { // 饼图中的线条颜色
lineStyle: {
color: 'red'
}
},
visualMap: { // 明亮度影射
show: false, // 不显示 visualMap 组件，只用于明暗度的映射
min: 80, // 映射的最小值为 80
max: 600, // 映射的最大值为 600
inRange: { // 明暗度的范围是 0 到 1
colorLightness: [0, 1]
}
},
title: { // 图表的标题
text: '饼图示例'
},
tooltip: {}, // 定义提示框
legend: { // 定义小图标
x: '200px', // 定义位置
y: '10px',
data: [
{ // 可单独定义每一个图标
name: '联盟广告',
icon: 'circle'
}, '视频广告', '邮件营销', '直接访问', '搜索引擎'] // 定义要展示的图标名称，与data中那么对应
},
series: {
type: 'pie', // 饼图
roseType: 'angle', // 玫瑰图
data: [
{ value: 235, name: '视频广告' },
{ value: 274, name: '联盟广告' },
{ value: 310, name: '邮件营销' },
{ value: 335, name: '直接访问' },
{ value: 400, name: '搜索引擎', itemStyle: {color: '#c23531'} } // 可以单个设置颜色
],
itemStyle: { // 整体颜色
color: '#c23531', // 饼图的颜色
shadowBlur: 200, // 阴影的大小
shadowOffsetX: 0, // 阴影水平方向上的偏移
shadowOffsetY: 0, // 阴影垂直方向上的偏移
shadowColor: 'rgba(0, 0, 0, 0.5)', // 阴影颜色
emphasis: { // 鼠标hover样式
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
}
myChart.setOption(option)// 使用刚指定的配置项和数据显示图表。
},
drawChartLine () {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById('echartsline')) // 修改主题
let option = {
title: { // 图表的标题
text: '折线·柱状示例'
},
xAxis: { // x轴
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // x轴的数据
splitLine: { show: false }, // 去除网格分割线
splitArea: {show: false}, // 保留网格区域
boundaryGap: true, // 两侧留白
axisLine: { // 坐标线
lineStyle: {
type: 'solid',
color: '#d8d8d8', // 轴线的颜色
width: '2'// 坐标线的宽度
}
},
axisTick: {// 刻度
show: true// 不显示刻度线
},
axisLabel: {
textStyle: {
color: '#878787' // 坐标值的具体的颜色
}
}
},
yAxis: { // y轴
name: '单位：次', // 轴的名字，默认位置在y轴上方显示
max: 2500, // 最大刻度
type: 'value',
axisLine: { // 坐标线
show: true
},
axisTick: {// 刻度
show: true
},
axisLabel: {
textStyle: {
color: '#878787' // 坐标值得具体的颜色
}
},
minInterval: 5, // 标值的最小间隔
splitLine: {
lineStyle: {
color: ['#f6f6f6'] // 分割线的颜色
}
}
},
toolbox: { // 菜单功能
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: { readOnly: false },
magicType: { type: ['line', 'bar'] },
restore: {},
saveAsImage: {}
}
},
legend: { // 每个图标的样式
data: ['邮件营销', '提交次数', '收取次数'], // 与series的name对应
left: '25%', // 图例的位置，可以用像素，可以用百分比，也可以用center，right等
top: 12.5, // 图例的位置
itemWidth: 10, // 图例图标的宽
itemHeight: 10, // 图例图标的高
textStyle: {
color: '#878787' // 值的具体的颜色
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量', // 数据堆叠
areaStyle: {},
data: [220, 182, 191, 234, 290, 330, 310],
itemStyle: {
normal: {
color: '#5d6de9', // 设置柱子颜色
label: {
show: true, // 柱子上显示值
position: 'top', // 值在柱子上方显示
textStyle: {
color: '#FD6B71'// 值得颜色
}
}
}
},
barWidth: 15// 设置柱子宽度，单位为px
},
{
name: '提交次数', // 每组数据的名字，与图例对应
data: [820, 932, 901, 1934, 1290, 1330, 1320], // 数据
type: 'line', // 柱状图 line折线图
areaStyle: {}, // 添加填充
smooth: true, // 平滑折线
itemStyle: {
normal: {
color: '#FD6B71', // 设置柱子颜色
label: {
show: true, // 柱子上显示值
position: 'top', // 值在柱子上方显示
textStyle: {
color: '#FD6B71'// 值得颜色
}
}
}
},
barWidth: 15// 设置柱子宽度，单位为px
}, {
name: '收取次数', // 每组数据的名字，与图例对应
data: [320, 632, 801, 994, 290, 130, 2320], // 数据
type: 'bar', // 柱状图 line折线图
areaStyle: {}, // 添加填充
itemStyle: {
normal: {
color: '#4a5a6a', // 设置柱子颜色
label: {
show: true, // 柱子上显示值
position: 'top', // 值在柱子上方显示
textStyle: {
color: '#4a5a6a'// 值得颜色
}
}
}
},
barWidth: 15// 设置柱子宽度，单位为px
}
]
}
myChart.setOption(option)// 使用刚指定的配置项和数据显示图表。
}
// <el-button :key="scope.$index" :loading="scope.row.isLoading" @click="refund(scope.$index, scope.row, scope)">强制退款</el-button>
// 给表格数据中的每一条数据添加一个字段
// if (!success.data.list) {
// this.tableData = []
// return
// }
// success.data.list = success.data.list.map(item => {
// item = { ...item, ...{ isLoading: false }}
// return item
// })-->
// this.tableData[scope.$index].isLoading = true 设置状态
}
}
</script>
<style lang='less' scoped>
.index {
width: 100%;
min-height: 300px;
box-sizing: border-box;
padding: 10px 20px 200px;
// 导航的样式修改
.el-menu-demo.el-menu--horizontal.el-menu {
width: 100%;
height: 50px;
margin-top: 20px;
.el-menu-item {
height: 50px;
line-height: 50px;
border-top-left-radius: 100%;
}
}
.title {
width: 100%;
height: 30px;
line-height: 30px;
display: flex;
justify-content: space-around;
align-items: center;
}
.echartsview {
display: flex;
justify-content: space-around;
.echarts {
width: 48%;
height: 300px;
}
}
.copyview {
box-sizing: border-box;
padding: 0 20px;
width: 100%;
.el-input {
width: 250px;
margin-left: 35px;
}
.el-button {
width: 120px;
margin-left: 12px;
}
}
.exporttoexcelview {
box-sizing: border-box;
width: 100%;
padding: 0 20px;
.el-button {
margin-left: 12px;
}
}
.table_list {
width: 100%;
min-height: 200px;
.el-table {
width: 100%;
}
.el-pagination {
padding: 10px 0px;
width: 100%;
text-align: center;
}
}
.collapse {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
.item {
width: 48%;
}
}
.carousel {
display: flex;
justify-content: space-around;
.item {
width: 48%;
height: 200px;
text-align: center;
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
}
}
.cardgroup {
width: 100%;
display: flex;
justify-content: space-around;
.el-card {
width: 280px;
height: 150px;
text-align: center;
}
}
.slider {
width: 100%;
display: flex;
justify-content: space-around;
}
.formlist {
width: 100%;
padding: 0 0 30px;
display: flex;
justify-content: space-around;
.formcontent {
width: 600px;
}
.formother {
width: 40%;
//常用的小布局
.row {
display: table;
width: 100%;
min-height: 100px;
margin-top: 10px;
.left {
width: 80px;
float: left;
text-align: right;
}
.right {
width: calc(100% - 80px);
min-height: 100px;
float: left;
box-sizing: border-box;
border: 1px solid #cccccc;
border-radius: 2px;
padding: 10px;
}
}
.img_show {
width: 100%;
text-align: left;
border: 1px solid #eeeeee;
.content {
width: calc(100% - 78px);
height: 78px;
float: right;
padding: 0px 5px;
span {
height: 50px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-height: 25px;
word-break: break-all;
}
p {
margin: 0;
margin-top: 5px;
}
}
}
}
}
.content {
width: 100%;
height: 50px;
line-height: 30px;
box-sizing: border-box;
padding: 0 30px;
}
}
</style>
