Add searchable admin screen
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
0c18e21d63
commit
37bb19d384
GPG Key ID:
CCC6AA87CC8DF425
11
README.md
11
README.md
@ -13,3 +13,14 @@ Password: **any**
|
|||||||
|
|
||||||
https://botpress.io/docs/tutorials/webchat-embedding
|
https://botpress.io/docs/tutorials/webchat-embedding
|
||||||
|
|
||||||
|
|
||||||
|
## TODO:
|
||||||
|
Adminpage:
|
||||||
|
|
||||||
|
Display grouping of skills ?!
|
||||||
|
|
||||||
|
Seperate skill select ?
|
||||||
|
|
||||||
|
Add a ADD button to team members
|
||||||
|
|
||||||
|
Implement Chatbot Logic
|
||||||
@ -42,7 +42,7 @@
|
|||||||
"driver.js": "0.9.5",
|
"driver.js": "0.9.5",
|
||||||
"dropzone": "5.5.1",
|
"dropzone": "5.5.1",
|
||||||
"echarts": "4.2.1",
|
"echarts": "4.2.1",
|
||||||
"element-ui": "2.7.0",
|
"element-ui": "2.13.0",
|
||||||
"file-saver": "2.0.1",
|
"file-saver": "2.0.1",
|
||||||
"fuse.js": "3.4.4",
|
"fuse.js": "3.4.4",
|
||||||
"js-cookie": "2.2.0",
|
"js-cookie": "2.2.0",
|
||||||
|
|||||||
@ -130,7 +130,7 @@ export default {
|
|||||||
.pan-info p a:hover {
|
.pan-info p a:hover {
|
||||||
background: rgba(255, 255, 255, 0.5);
|
background: rgba(255, 255, 255, 0.5);
|
||||||
}
|
}
|
||||||
|
/*
|
||||||
.pan-item:hover .pan-thumb {
|
.pan-item:hover .pan-thumb {
|
||||||
transform: rotate(-110deg);
|
transform: rotate(-110deg);
|
||||||
}
|
}
|
||||||
@ -139,4 +139,5 @@ export default {
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateX(0px) rotate(0deg);
|
transform: translateX(0px) rotate(0deg);
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -28,9 +28,10 @@ import * as filters from './filters' // global filters
|
|||||||
* please remove it before going online! ! !
|
* please remove it before going online! ! !
|
||||||
*/
|
*/
|
||||||
import { mockXHR } from '../mock'
|
import { mockXHR } from '../mock'
|
||||||
if (process.env.NODE_ENV === 'production') {
|
// LB Workaroud for method not allowed issue
|
||||||
|
// if (process.env.NODE_ENV === 'production') {
|
||||||
mockXHR()
|
mockXHR()
|
||||||
}
|
// }
|
||||||
|
|
||||||
Vue.use(Element, {
|
Vue.use(Element, {
|
||||||
size: Cookies.get('size') || 'medium' // set element-ui default size
|
size: Cookies.get('size') || 'medium' // set element-ui default size
|
||||||
@ -43,7 +44,7 @@ Object.keys(filters).forEach(key => {
|
|||||||
|
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
new Vue({
|
window.vinstance = new Vue({
|
||||||
el: '#app',
|
el: '#app',
|
||||||
router,
|
router,
|
||||||
store,
|
store,
|
||||||
|
|||||||
@ -71,31 +71,6 @@ export const constantRoutes = [
|
|||||||
component: () => import('@/views/error-page/401'),
|
component: () => import('@/views/error-page/401'),
|
||||||
hidden: true
|
hidden: true
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/',
|
|
||||||
component: Layout,
|
|
||||||
redirect: '/dashboard',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: 'dashboard',
|
|
||||||
component: () => import('@/views/dashboard/index'),
|
|
||||||
name: 'Dashboard',
|
|
||||||
meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/chatbot',
|
|
||||||
component: Layout,
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: 'index',
|
|
||||||
component: () => import('@/views/chatbot/index'),
|
|
||||||
name: 'Chatbot Joe',
|
|
||||||
meta: { title: 'Chatbot Joe', icon: 'message', affix: true }
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/documentation',
|
path: '/documentation',
|
||||||
hidden: !settings.developmentSidebar,
|
hidden: !settings.developmentSidebar,
|
||||||
@ -144,6 +119,48 @@ export const constantRoutes = [
|
|||||||
* the routes that need to be dynamically loaded based on user roles
|
* the routes that need to be dynamically loaded based on user roles
|
||||||
*/
|
*/
|
||||||
export const asyncRoutes = [
|
export const asyncRoutes = [
|
||||||
|
{
|
||||||
|
path: '/find',
|
||||||
|
component: Layout,
|
||||||
|
alwaysShow: false,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'index',
|
||||||
|
component: () => import('@/views/find/index'),
|
||||||
|
name: 'Personen finden',
|
||||||
|
meta: {
|
||||||
|
roles: ['admin'],
|
||||||
|
title: 'Personen finden',
|
||||||
|
icon: 'search'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
component: Layout,
|
||||||
|
redirect: '/dashboard',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'dashboard',
|
||||||
|
component: () => import('@/views/dashboard/index'),
|
||||||
|
name: 'Dashboard',
|
||||||
|
meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/chatbot',
|
||||||
|
component: Layout,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'index',
|
||||||
|
component: () => import('@/views/chatbot/index'),
|
||||||
|
name: 'Chatbot Joe',
|
||||||
|
meta: { title: 'Chatbot Joe', icon: 'message', affix: true }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/permission',
|
path: '/permission',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
|
|||||||
@ -23,8 +23,7 @@ export default {
|
|||||||
enableTranscriptDownload: false,
|
enableTranscriptDownload: false,
|
||||||
hideWidget: true,
|
hideWidget: true,
|
||||||
extraStylesheet: stylesheetdir,
|
extraStylesheet: stylesheetdir,
|
||||||
botName: 'Jo',
|
botName: 'Jo'
|
||||||
botAvatarUrl: 'https://joinbot.tk/bot/api/v1/bots/joinbot/media/0ricefe6x9gwuvh72p0j-joe%20head.png'
|
|
||||||
})
|
})
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
window.botpressWebChat.sendEvent({
|
window.botpressWebChat.sendEvent({
|
||||||
|
|||||||
@ -7,9 +7,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="card-panel-description">
|
<div class="card-panel-description">
|
||||||
<div class="card-panel-text">
|
<div class="card-panel-text">
|
||||||
New Visits
|
Eingetragene User
|
||||||
</div>
|
</div>
|
||||||
<count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
|
<count-to :start-val="0" :end-val="78" :duration="2600" class="card-panel-num" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
@ -20,35 +20,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="card-panel-description">
|
<div class="card-panel-description">
|
||||||
<div class="card-panel-text">
|
<div class="card-panel-text">
|
||||||
Messages
|
Chats
|
||||||
</div>
|
</div>
|
||||||
<count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
|
<count-to :start-val="0" :end-val="50" :duration="3000" class="card-panel-num" />
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
|
||||||
<div class="card-panel" @click="handleSetLineChartData('purchases')">
|
|
||||||
<div class="card-panel-icon-wrapper icon-money">
|
|
||||||
<svg-icon icon-class="money" class-name="card-panel-icon" />
|
|
||||||
</div>
|
|
||||||
<div class="card-panel-description">
|
|
||||||
<div class="card-panel-text">
|
|
||||||
Purchases
|
|
||||||
</div>
|
|
||||||
<count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
|
||||||
<div class="card-panel" @click="handleSetLineChartData('shoppings')">
|
|
||||||
<div class="card-panel-icon-wrapper icon-shopping">
|
|
||||||
<svg-icon icon-class="shopping" class-name="card-panel-icon" />
|
|
||||||
</div>
|
|
||||||
<div class="card-panel-description">
|
|
||||||
<div class="card-panel-text">
|
|
||||||
Shoppings
|
|
||||||
</div>
|
|
||||||
<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|||||||
389
src/views/find-classic/index.vue
Normal file
389
src/views/find-classic/index.vue
Normal file
@ -0,0 +1,389 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<div class="filter-container">
|
||||||
|
<el-input v-model="listQuery.title" placeholder="Title" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
|
||||||
|
<el-select v-model="listQuery.importance" placeholder="Imp" clearable style="width: 90px" class="filter-item">
|
||||||
|
<el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
|
||||||
|
</el-select>
|
||||||
|
<el-select v-model="listQuery.type" placeholder="Type" clearable class="filter-item" style="width: 130px">
|
||||||
|
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
|
||||||
|
</el-select>
|
||||||
|
<el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
|
||||||
|
<el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
|
||||||
|
</el-select>
|
||||||
|
<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
|
||||||
|
Search
|
||||||
|
</el-button>
|
||||||
|
<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
|
||||||
|
Add
|
||||||
|
</el-button>
|
||||||
|
<el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
|
||||||
|
Export
|
||||||
|
</el-button>
|
||||||
|
<el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
|
||||||
|
reviewer
|
||||||
|
</el-checkbox>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table
|
||||||
|
:key="tableKey"
|
||||||
|
v-loading="listLoading"
|
||||||
|
:data="list"
|
||||||
|
border
|
||||||
|
fit
|
||||||
|
highlight-current-row
|
||||||
|
style="width: 100%;"
|
||||||
|
@sort-change="sortChange"
|
||||||
|
>
|
||||||
|
<el-table-column label="ID" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
|
||||||
|
<template slot-scope="{row}">
|
||||||
|
<span>{{ row.id }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="Date" width="150px" align="center">
|
||||||
|
<template slot-scope="{row}">
|
||||||
|
<span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="Title" min-width="150px">
|
||||||
|
<template slot-scope="{row}">
|
||||||
|
<span class="link-type" @click="handleUpdate(row)">{{ row.title }}</span>
|
||||||
|
<el-tag>{{ row.type | typeFilter }}</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="Author" width="110px" align="center">
|
||||||
|
<template slot-scope="{row}">
|
||||||
|
<span>{{ row.author }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column v-if="showReviewer" label="Reviewer" width="110px" align="center">
|
||||||
|
<template slot-scope="{row}">
|
||||||
|
<span style="color:red;">{{ row.reviewer }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="Imp" width="80px">
|
||||||
|
<template slot-scope="{row}">
|
||||||
|
<svg-icon v-for="n in + row.importance" :key="n" icon-class="star" class="meta-item__icon" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="Readings" align="center" width="95">
|
||||||
|
<template slot-scope="{row}">
|
||||||
|
<span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
|
||||||
|
<span v-else>0</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="Status" class-name="status-col" width="100">
|
||||||
|
<template slot-scope="{row}">
|
||||||
|
<el-tag :type="row.status | statusFilter">
|
||||||
|
{{ row.status }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
|
||||||
|
<template slot-scope="{row}">
|
||||||
|
<el-button type="primary" size="mini" @click="handleUpdate(row)">
|
||||||
|
Edit
|
||||||
|
</el-button>
|
||||||
|
<el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
|
||||||
|
Publish
|
||||||
|
</el-button>
|
||||||
|
<el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
|
||||||
|
Draft
|
||||||
|
</el-button>
|
||||||
|
<el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(row,'deleted')">
|
||||||
|
Delete
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
|
||||||
|
|
||||||
|
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
|
||||||
|
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
|
||||||
|
<el-form-item label="Type" prop="type">
|
||||||
|
<el-select v-model="temp.type" class="filter-item" placeholder="Please select">
|
||||||
|
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Date" prop="timestamp">
|
||||||
|
<el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Title" prop="title">
|
||||||
|
<el-input v-model="temp.title" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Status">
|
||||||
|
<el-select v-model="temp.status" class="filter-item" placeholder="Please select">
|
||||||
|
<el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Imp">
|
||||||
|
<el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Remark">
|
||||||
|
<el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="dialogFormVisible = false">
|
||||||
|
Cancel
|
||||||
|
</el-button>
|
||||||
|
<el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
|
||||||
|
Confirm
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
|
||||||
|
<el-table :data="pvData" border fit highlight-current-row style="width: 100%">
|
||||||
|
<el-table-column prop="key" label="Channel" />
|
||||||
|
<el-table-column prop="pv" label="Pv" />
|
||||||
|
</el-table>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="dialogPvVisible = false">Confirm</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { fetchList, fetchPv, createArticle, updateArticle } from '@/api/article'
|
||||||
|
import waves from '@/directive/waves' // waves directive
|
||||||
|
import { parseTime } from '@/utils'
|
||||||
|
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
|
||||||
|
|
||||||
|
const calendarTypeOptions = [
|
||||||
|
{ key: 'CN', display_name: 'China' },
|
||||||
|
{ key: 'US', display_name: 'USA' },
|
||||||
|
{ key: 'JP', display_name: 'Japan' },
|
||||||
|
{ key: 'EU', display_name: 'Eurozone' }
|
||||||
|
]
|
||||||
|
|
||||||
|
// arr to obj, such as { CN : "China", US : "USA" }
|
||||||
|
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
|
||||||
|
acc[cur.key] = cur.display_name
|
||||||
|
return acc
|
||||||
|
}, {})
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'ComplexTable',
|
||||||
|
components: { Pagination },
|
||||||
|
directives: { waves },
|
||||||
|
filters: {
|
||||||
|
statusFilter(status) {
|
||||||
|
const statusMap = {
|
||||||
|
published: 'success',
|
||||||
|
draft: 'info',
|
||||||
|
deleted: 'danger'
|
||||||
|
}
|
||||||
|
return statusMap[status]
|
||||||
|
},
|
||||||
|
typeFilter(type) {
|
||||||
|
return calendarTypeKeyValue[type]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tableKey: 0,
|
||||||
|
list: null,
|
||||||
|
total: 0,
|
||||||
|
listLoading: true,
|
||||||
|
listQuery: {
|
||||||
|
page: 1,
|
||||||
|
limit: 20,
|
||||||
|
importance: undefined,
|
||||||
|
title: undefined,
|
||||||
|
type: undefined,
|
||||||
|
sort: '+id'
|
||||||
|
},
|
||||||
|
importanceOptions: [1, 2, 3],
|
||||||
|
calendarTypeOptions,
|
||||||
|
sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
|
||||||
|
statusOptions: ['published', 'draft', 'deleted'],
|
||||||
|
showReviewer: false,
|
||||||
|
temp: {
|
||||||
|
id: undefined,
|
||||||
|
importance: 1,
|
||||||
|
remark: '',
|
||||||
|
timestamp: new Date(),
|
||||||
|
title: '',
|
||||||
|
type: '',
|
||||||
|
status: 'published'
|
||||||
|
},
|
||||||
|
dialogFormVisible: false,
|
||||||
|
dialogStatus: '',
|
||||||
|
textMap: {
|
||||||
|
update: 'Edit',
|
||||||
|
create: 'Create'
|
||||||
|
},
|
||||||
|
dialogPvVisible: false,
|
||||||
|
pvData: [],
|
||||||
|
rules: {
|
||||||
|
type: [{ required: true, message: 'type is required', trigger: 'change' }],
|
||||||
|
timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
|
||||||
|
title: [{ required: true, message: 'title is required', trigger: 'blur' }]
|
||||||
|
},
|
||||||
|
downloadLoading: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getList() {
|
||||||
|
this.listLoading = true
|
||||||
|
fetchList(this.listQuery).then(response => {
|
||||||
|
this.list = response.data.items
|
||||||
|
this.total = response.data.total
|
||||||
|
|
||||||
|
// Just to simulate the time of the request
|
||||||
|
setTimeout(() => {
|
||||||
|
this.listLoading = false
|
||||||
|
}, 1.5 * 1000)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleFilter() {
|
||||||
|
this.listQuery.page = 1
|
||||||
|
this.getList()
|
||||||
|
},
|
||||||
|
handleModifyStatus(row, status) {
|
||||||
|
this.$message({
|
||||||
|
message: '操作Success',
|
||||||
|
type: 'success'
|
||||||
|
})
|
||||||
|
row.status = status
|
||||||
|
},
|
||||||
|
sortChange(data) {
|
||||||
|
const { prop, order } = data
|
||||||
|
if (prop === 'id') {
|
||||||
|
this.sortByID(order)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
sortByID(order) {
|
||||||
|
if (order === 'ascending') {
|
||||||
|
this.listQuery.sort = '+id'
|
||||||
|
} else {
|
||||||
|
this.listQuery.sort = '-id'
|
||||||
|
}
|
||||||
|
this.handleFilter()
|
||||||
|
},
|
||||||
|
resetTemp() {
|
||||||
|
this.temp = {
|
||||||
|
id: undefined,
|
||||||
|
importance: 1,
|
||||||
|
remark: '',
|
||||||
|
timestamp: new Date(),
|
||||||
|
title: '',
|
||||||
|
status: 'published',
|
||||||
|
type: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleCreate() {
|
||||||
|
this.resetTemp()
|
||||||
|
this.dialogStatus = 'create'
|
||||||
|
this.dialogFormVisible = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs['dataForm'].clearValidate()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
createData() {
|
||||||
|
this.$refs['dataForm'].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
|
||||||
|
this.temp.author = 'vue-element-admin'
|
||||||
|
createArticle(this.temp).then(() => {
|
||||||
|
this.list.unshift(this.temp)
|
||||||
|
this.dialogFormVisible = false
|
||||||
|
this.$notify({
|
||||||
|
title: 'Success',
|
||||||
|
message: 'Created Successfully',
|
||||||
|
type: 'success',
|
||||||
|
duration: 2000
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.temp = Object.assign({}, row) // copy obj
|
||||||
|
this.temp.timestamp = new Date(this.temp.timestamp)
|
||||||
|
this.dialogStatus = 'update'
|
||||||
|
this.dialogFormVisible = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs['dataForm'].clearValidate()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
updateData() {
|
||||||
|
this.$refs['dataForm'].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
const tempData = Object.assign({}, this.temp)
|
||||||
|
tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
|
||||||
|
updateArticle(tempData).then(() => {
|
||||||
|
for (const v of this.list) {
|
||||||
|
if (v.id === this.temp.id) {
|
||||||
|
const index = this.list.indexOf(v)
|
||||||
|
this.list.splice(index, 1, this.temp)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.dialogFormVisible = false
|
||||||
|
this.$notify({
|
||||||
|
title: 'Success',
|
||||||
|
message: 'Update Successfully',
|
||||||
|
type: 'success',
|
||||||
|
duration: 2000
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleDelete(row) {
|
||||||
|
this.$notify({
|
||||||
|
title: 'Success',
|
||||||
|
message: 'Delete Successfully',
|
||||||
|
type: 'success',
|
||||||
|
duration: 2000
|
||||||
|
})
|
||||||
|
const index = this.list.indexOf(row)
|
||||||
|
this.list.splice(index, 1)
|
||||||
|
},
|
||||||
|
handleFetchPv(pv) {
|
||||||
|
fetchPv(pv).then(response => {
|
||||||
|
this.pvData = response.data.pvData
|
||||||
|
this.dialogPvVisible = true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
handleDownload() {
|
||||||
|
this.downloadLoading = true
|
||||||
|
import('@/vendor/Export2Excel').then(excel => {
|
||||||
|
const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
|
||||||
|
const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
|
||||||
|
const data = this.formatJson(filterVal, this.list)
|
||||||
|
excel.export_json_to_excel({
|
||||||
|
header: tHeader,
|
||||||
|
data,
|
||||||
|
filename: 'table-list'
|
||||||
|
})
|
||||||
|
this.downloadLoading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
formatJson(filterVal, jsonData) {
|
||||||
|
return jsonData.map(v => filterVal.map(j => {
|
||||||
|
if (j === 'timestamp') {
|
||||||
|
return parseTime(v[j])
|
||||||
|
} else {
|
||||||
|
return v[j]
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
},
|
||||||
|
getSortClass: function(key) {
|
||||||
|
const sort = this.listQuery.sort
|
||||||
|
return sort === `+${key}`
|
||||||
|
? 'ascending'
|
||||||
|
: sort === `-${key}`
|
||||||
|
? 'descending'
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
102
src/views/find/components/BarChart.vue
Normal file
102
src/views/find/components/BarChart.vue
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="className" :style="{height:height,width:width}" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import echarts from 'echarts'
|
||||||
|
require('echarts/theme/macarons') // echarts theme
|
||||||
|
import resize from './mixins/resize'
|
||||||
|
|
||||||
|
const animationDuration = 6000
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mixins: [resize],
|
||||||
|
props: {
|
||||||
|
className: {
|
||||||
|
type: String,
|
||||||
|
default: 'chart'
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%'
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '300px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (!this.chart) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.chart.dispose()
|
||||||
|
this.chart = null
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initChart() {
|
||||||
|
this.chart = echarts.init(this.$el, 'macarons')
|
||||||
|
|
||||||
|
this.chart.setOption({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||||
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: 10,
|
||||||
|
left: '2%',
|
||||||
|
right: '2%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: [{
|
||||||
|
type: 'category',
|
||||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||||
|
axisTick: {
|
||||||
|
alignWithLabel: true
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
yAxis: [{
|
||||||
|
type: 'value',
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
series: [{
|
||||||
|
name: 'pageA',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'vistors',
|
||||||
|
barWidth: '60%',
|
||||||
|
data: [79, 52, 200, 334, 390, 330, 220],
|
||||||
|
animationDuration
|
||||||
|
}, {
|
||||||
|
name: 'pageB',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'vistors',
|
||||||
|
barWidth: '60%',
|
||||||
|
data: [80, 52, 200, 334, 390, 330, 220],
|
||||||
|
animationDuration
|
||||||
|
}, {
|
||||||
|
name: 'pageC',
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'vistors',
|
||||||
|
barWidth: '60%',
|
||||||
|
data: [30, 52, 200, 334, 390, 330, 220],
|
||||||
|
animationDuration
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
111
src/views/find/components/BoxCard.vue
Normal file
111
src/views/find/components/BoxCard.vue
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
<template>
|
||||||
|
<el-card class="box-card-component" style="margin-left:8px;">
|
||||||
|
|
||||||
|
<el-container>
|
||||||
|
<el-aside class="avatar-side" width="200px">
|
||||||
|
<pan-thumb :image="person.avatar || 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'" />
|
||||||
|
</el-aside>
|
||||||
|
<el-container>
|
||||||
|
<el-header>
|
||||||
|
<h3>{{ person.name }}</h3>
|
||||||
|
</el-header>
|
||||||
|
<el-main class="skillbars">
|
||||||
|
<div style="position:relative;">
|
||||||
|
<div v-for="skill in sortSkills(person.skills)" :key="skill.name" class="progress-item">
|
||||||
|
<span>{{ skill.name }}</span>
|
||||||
|
<el-progress :percentage="skill.strength" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
</el-container>
|
||||||
|
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapGetters } from 'vuex'
|
||||||
|
import PanThumb from '@/components/PanThumb'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: { PanThumb },
|
||||||
|
filters: {
|
||||||
|
statusFilter(status) {
|
||||||
|
const statusMap = {
|
||||||
|
success: 'success',
|
||||||
|
pending: 'danger'
|
||||||
|
}
|
||||||
|
return statusMap[status]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
person: {
|
||||||
|
type: Object,
|
||||||
|
default: () => { return { name: 'Max Mustermann' } }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
statisticsData: {
|
||||||
|
article_count: 1024,
|
||||||
|
pageviews_count: 1024
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters([
|
||||||
|
'name',
|
||||||
|
'avatar',
|
||||||
|
'roles'
|
||||||
|
])
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
sortSkills(skills) {
|
||||||
|
return skills.sort((a, b) => (a.strength > b.strength) ? -1 : 1)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" >
|
||||||
|
.box-card-component{
|
||||||
|
.el-card__header {
|
||||||
|
padding: 0px!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box-card-component {
|
||||||
|
.box-card-header {
|
||||||
|
position: relative;
|
||||||
|
height: 50px;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
transition: all 0.2s linear;
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.1, 1.1);
|
||||||
|
filter: contrast(130%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-side{
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.skillbars {
|
||||||
|
padding-top:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-item {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 1510px){
|
||||||
|
.mallki-text{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
135
src/views/find/components/LineChart.vue
Normal file
135
src/views/find/components/LineChart.vue
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="className" :style="{height:height,width:width}" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import echarts from 'echarts'
|
||||||
|
require('echarts/theme/macarons') // echarts theme
|
||||||
|
import resize from './mixins/resize'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mixins: [resize],
|
||||||
|
props: {
|
||||||
|
className: {
|
||||||
|
type: String,
|
||||||
|
default: 'chart'
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%'
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '350px'
|
||||||
|
},
|
||||||
|
autoResize: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
chartData: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
chartData: {
|
||||||
|
deep: true,
|
||||||
|
handler(val) {
|
||||||
|
this.setOptions(val)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (!this.chart) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.chart.dispose()
|
||||||
|
this.chart = null
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initChart() {
|
||||||
|
this.chart = echarts.init(this.$el, 'macarons')
|
||||||
|
this.setOptions(this.chartData)
|
||||||
|
},
|
||||||
|
setOptions({ expectedData, actualData } = {}) {
|
||||||
|
this.chart.setOption({
|
||||||
|
xAxis: {
|
||||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||||
|
boundaryGap: false,
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: 10,
|
||||||
|
right: 10,
|
||||||
|
bottom: 20,
|
||||||
|
top: 30,
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross'
|
||||||
|
},
|
||||||
|
padding: [5, 10]
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['expected', 'actual']
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: 'expected', itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#FF005A',
|
||||||
|
lineStyle: {
|
||||||
|
color: '#FF005A',
|
||||||
|
width: 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
smooth: true,
|
||||||
|
type: 'line',
|
||||||
|
data: expectedData,
|
||||||
|
animationDuration: 2800,
|
||||||
|
animationEasing: 'cubicInOut'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'actual',
|
||||||
|
smooth: true,
|
||||||
|
type: 'line',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#3888fa',
|
||||||
|
lineStyle: {
|
||||||
|
color: '#3888fa',
|
||||||
|
width: 2
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
color: '#f3f8ff'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: actualData,
|
||||||
|
animationDuration: 2800,
|
||||||
|
animationEasing: 'quadraticOut'
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
181
src/views/find/components/PanelGroup.vue
Normal file
181
src/views/find/components/PanelGroup.vue
Normal file
@ -0,0 +1,181 @@
|
|||||||
|
<template>
|
||||||
|
<el-row :gutter="40" class="panel-group">
|
||||||
|
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||||
|
<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
|
||||||
|
<div class="card-panel-icon-wrapper icon-people">
|
||||||
|
<svg-icon icon-class="peoples" class-name="card-panel-icon" />
|
||||||
|
</div>
|
||||||
|
<div class="card-panel-description">
|
||||||
|
<div class="card-panel-text">
|
||||||
|
New Visits
|
||||||
|
</div>
|
||||||
|
<count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||||
|
<div class="card-panel" @click="handleSetLineChartData('messages')">
|
||||||
|
<div class="card-panel-icon-wrapper icon-message">
|
||||||
|
<svg-icon icon-class="message" class-name="card-panel-icon" />
|
||||||
|
</div>
|
||||||
|
<div class="card-panel-description">
|
||||||
|
<div class="card-panel-text">
|
||||||
|
Messages
|
||||||
|
</div>
|
||||||
|
<count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||||
|
<div class="card-panel" @click="handleSetLineChartData('purchases')">
|
||||||
|
<div class="card-panel-icon-wrapper icon-money">
|
||||||
|
<svg-icon icon-class="money" class-name="card-panel-icon" />
|
||||||
|
</div>
|
||||||
|
<div class="card-panel-description">
|
||||||
|
<div class="card-panel-text">
|
||||||
|
Purchases
|
||||||
|
</div>
|
||||||
|
<count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
|
||||||
|
<div class="card-panel" @click="handleSetLineChartData('shoppings')">
|
||||||
|
<div class="card-panel-icon-wrapper icon-shopping">
|
||||||
|
<svg-icon icon-class="shopping" class-name="card-panel-icon" />
|
||||||
|
</div>
|
||||||
|
<div class="card-panel-description">
|
||||||
|
<div class="card-panel-text">
|
||||||
|
Shoppings
|
||||||
|
</div>
|
||||||
|
<count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CountTo from 'vue-count-to'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
CountTo
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleSetLineChartData(type) {
|
||||||
|
this.$emit('handleSetLineChartData', type)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.panel-group {
|
||||||
|
margin-top: 18px;
|
||||||
|
|
||||||
|
.card-panel-col {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-panel {
|
||||||
|
height: 108px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 12px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
color: #666;
|
||||||
|
background: #fff;
|
||||||
|
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
||||||
|
border-color: rgba(0, 0, 0, .05);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.card-panel-icon-wrapper {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-people {
|
||||||
|
background: #40c9c6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-message {
|
||||||
|
background: #36a3f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-money {
|
||||||
|
background: #f4516c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shopping {
|
||||||
|
background: #34bfa3
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-people {
|
||||||
|
color: #40c9c6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-message {
|
||||||
|
color: #36a3f7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-money {
|
||||||
|
color: #f4516c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shopping {
|
||||||
|
color: #34bfa3
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-panel-icon-wrapper {
|
||||||
|
float: left;
|
||||||
|
margin: 14px 0 0 14px;
|
||||||
|
padding: 16px;
|
||||||
|
transition: all 0.38s ease-out;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-panel-icon {
|
||||||
|
float: left;
|
||||||
|
font-size: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-panel-description {
|
||||||
|
float: right;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 26px;
|
||||||
|
margin-left: 0px;
|
||||||
|
|
||||||
|
.card-panel-text {
|
||||||
|
line-height: 18px;
|
||||||
|
color: rgba(0, 0, 0, 0.45);
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-panel-num {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:550px) {
|
||||||
|
.card-panel-description {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-panel-icon-wrapper {
|
||||||
|
float: none !important;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 !important;
|
||||||
|
|
||||||
|
.svg-icon {
|
||||||
|
display: block;
|
||||||
|
margin: 14px auto !important;
|
||||||
|
float: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
79
src/views/find/components/PieChart.vue
Normal file
79
src/views/find/components/PieChart.vue
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="className" :style="{height:height,width:width}" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import echarts from 'echarts'
|
||||||
|
require('echarts/theme/macarons') // echarts theme
|
||||||
|
import resize from './mixins/resize'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mixins: [resize],
|
||||||
|
props: {
|
||||||
|
className: {
|
||||||
|
type: String,
|
||||||
|
default: 'chart'
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%'
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '300px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (!this.chart) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.chart.dispose()
|
||||||
|
this.chart = null
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initChart() {
|
||||||
|
this.chart = echarts.init(this.$el, 'macarons')
|
||||||
|
|
||||||
|
this.chart.setOption({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
left: 'center',
|
||||||
|
bottom: '10',
|
||||||
|
data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'WEEKLY WRITE ARTICLES',
|
||||||
|
type: 'pie',
|
||||||
|
roseType: 'radius',
|
||||||
|
radius: [15, 95],
|
||||||
|
center: ['50%', '38%'],
|
||||||
|
data: [
|
||||||
|
{ value: 320, name: 'Industries' },
|
||||||
|
{ value: 240, name: 'Technology' },
|
||||||
|
{ value: 149, name: 'Forex' },
|
||||||
|
{ value: 100, name: 'Gold' },
|
||||||
|
{ value: 59, name: 'Forecasts' }
|
||||||
|
],
|
||||||
|
animationEasing: 'cubicInOut',
|
||||||
|
animationDuration: 2600
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
116
src/views/find/components/RaddarChart.vue
Normal file
116
src/views/find/components/RaddarChart.vue
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="className" :style="{height:height,width:width}" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import echarts from 'echarts'
|
||||||
|
require('echarts/theme/macarons') // echarts theme
|
||||||
|
import resize from './mixins/resize'
|
||||||
|
|
||||||
|
const animationDuration = 3000
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mixins: [resize],
|
||||||
|
props: {
|
||||||
|
className: {
|
||||||
|
type: String,
|
||||||
|
default: 'chart'
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%'
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '300px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (!this.chart) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.chart.dispose()
|
||||||
|
this.chart = null
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initChart() {
|
||||||
|
this.chart = echarts.init(this.$el, 'macarons')
|
||||||
|
|
||||||
|
this.chart.setOption({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||||
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
radar: {
|
||||||
|
radius: '66%',
|
||||||
|
center: ['50%', '42%'],
|
||||||
|
splitNumber: 8,
|
||||||
|
splitArea: {
|
||||||
|
areaStyle: {
|
||||||
|
color: 'rgba(127,95,132,.3)',
|
||||||
|
opacity: 1,
|
||||||
|
shadowBlur: 45,
|
||||||
|
shadowColor: 'rgba(0,0,0,.5)',
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowOffsetY: 15
|
||||||
|
}
|
||||||
|
},
|
||||||
|
indicator: [
|
||||||
|
{ name: 'Sales', max: 10000 },
|
||||||
|
{ name: 'Administration', max: 20000 },
|
||||||
|
{ name: 'Information Techology', max: 20000 },
|
||||||
|
{ name: 'Customer Support', max: 20000 },
|
||||||
|
{ name: 'Development', max: 20000 },
|
||||||
|
{ name: 'Marketing', max: 20000 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
left: 'center',
|
||||||
|
bottom: '10',
|
||||||
|
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
type: 'radar',
|
||||||
|
symbolSize: 0,
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
shadowBlur: 13,
|
||||||
|
shadowColor: 'rgba(0,0,0,.2)',
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowOffsetY: 10,
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: [5000, 7000, 12000, 11000, 15000, 14000],
|
||||||
|
name: 'Allocated Budget'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: [4000, 9000, 15000, 15000, 13000, 11000],
|
||||||
|
name: 'Expected Spending'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: [5500, 11000, 12000, 15000, 12000, 12000],
|
||||||
|
name: 'Actual Spending'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
animationDuration: animationDuration
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
81
src/views/find/components/TodoList/Todo.vue
Normal file
81
src/views/find/components/TodoList/Todo.vue
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
<template>
|
||||||
|
<li :class="{ completed: todo.done, editing: editing }" class="todo">
|
||||||
|
<div class="view">
|
||||||
|
<input
|
||||||
|
:checked="todo.done"
|
||||||
|
class="toggle"
|
||||||
|
type="checkbox"
|
||||||
|
@change="toggleTodo( todo)"
|
||||||
|
>
|
||||||
|
<label @dblclick="editing = true" v-text="todo.text" />
|
||||||
|
<button class="destroy" @click="deleteTodo( todo )" />
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
v-show="editing"
|
||||||
|
v-focus="editing"
|
||||||
|
:value="todo.text"
|
||||||
|
class="edit"
|
||||||
|
@keyup.enter="doneEdit"
|
||||||
|
@keyup.esc="cancelEdit"
|
||||||
|
@blur="doneEdit"
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Todo',
|
||||||
|
directives: {
|
||||||
|
focus(el, { value }, { context }) {
|
||||||
|
if (value) {
|
||||||
|
context.$nextTick(() => {
|
||||||
|
el.focus()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
todo: {
|
||||||
|
type: Object,
|
||||||
|
default: function() {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editing: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
deleteTodo(todo) {
|
||||||
|
this.$emit('deleteTodo', todo)
|
||||||
|
},
|
||||||
|
editTodo({ todo, value }) {
|
||||||
|
this.$emit('editTodo', { todo, value })
|
||||||
|
},
|
||||||
|
toggleTodo(todo) {
|
||||||
|
this.$emit('toggleTodo', todo)
|
||||||
|
},
|
||||||
|
doneEdit(e) {
|
||||||
|
const value = e.target.value.trim()
|
||||||
|
const { todo } = this
|
||||||
|
if (!value) {
|
||||||
|
this.deleteTodo({
|
||||||
|
todo
|
||||||
|
})
|
||||||
|
} else if (this.editing) {
|
||||||
|
this.editTodo({
|
||||||
|
todo,
|
||||||
|
value
|
||||||
|
})
|
||||||
|
this.editing = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
cancelEdit(e) {
|
||||||
|
e.target.value = this.todo.text
|
||||||
|
this.editing = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
320
src/views/find/components/TodoList/index.scss
Normal file
320
src/views/find/components/TodoList/index.scss
Normal file
@ -0,0 +1,320 @@
|
|||||||
|
.todoapp {
|
||||||
|
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.4em;
|
||||||
|
color: #4d4d4d;
|
||||||
|
min-width: 230px;
|
||||||
|
max-width: 550px;
|
||||||
|
margin: 0 auto ;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
font-weight: 300;
|
||||||
|
background: #fff;
|
||||||
|
z-index: 1;
|
||||||
|
position: relative;
|
||||||
|
button {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
background: none;
|
||||||
|
font-size: 100%;
|
||||||
|
vertical-align: baseline;
|
||||||
|
font-family: inherit;
|
||||||
|
font-weight: inherit;
|
||||||
|
color: inherit;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
:focus {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.todoapp {
|
||||||
|
background: #fff;
|
||||||
|
margin: 130px 0 40px 0;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
.todoapp input::-webkit-input-placeholder {
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #e6e6e6;
|
||||||
|
}
|
||||||
|
.todoapp input::-moz-placeholder {
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #e6e6e6;
|
||||||
|
}
|
||||||
|
.todoapp input::input-placeholder {
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 300;
|
||||||
|
color: #e6e6e6;
|
||||||
|
}
|
||||||
|
.todoapp h1 {
|
||||||
|
position: absolute;
|
||||||
|
top: -155px;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 100px;
|
||||||
|
font-weight: 100;
|
||||||
|
text-align: center;
|
||||||
|
color: rgba(175, 47, 47, 0.15);
|
||||||
|
-webkit-text-rendering: optimizeLegibility;
|
||||||
|
-moz-text-rendering: optimizeLegibility;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
.new-todo,
|
||||||
|
.edit {
|
||||||
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 18px;
|
||||||
|
font-family: inherit;
|
||||||
|
font-weight: inherit;
|
||||||
|
line-height: 1.4em;
|
||||||
|
border: 0;
|
||||||
|
color: inherit;
|
||||||
|
padding: 6px;
|
||||||
|
border: 1px solid #999;
|
||||||
|
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
.new-todo {
|
||||||
|
padding: 10px 16px 16px 60px;
|
||||||
|
border: none;
|
||||||
|
background: rgba(0, 0, 0, 0.003);
|
||||||
|
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
|
||||||
|
}
|
||||||
|
.main {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
border-top: 1px solid #e6e6e6;
|
||||||
|
}
|
||||||
|
.toggle-all {
|
||||||
|
text-align: center;
|
||||||
|
border: none;
|
||||||
|
/* Mobile Safari */
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.toggle-all+label {
|
||||||
|
width: 60px;
|
||||||
|
height: 34px;
|
||||||
|
font-size: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: -52px;
|
||||||
|
left: -13px;
|
||||||
|
-webkit-transform: rotate(90deg);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
.toggle-all+label:before {
|
||||||
|
content: '❯';
|
||||||
|
font-size: 22px;
|
||||||
|
color: #e6e6e6;
|
||||||
|
padding: 10px 27px 10px 27px;
|
||||||
|
}
|
||||||
|
.toggle-all:checked+label:before {
|
||||||
|
color: #737373;
|
||||||
|
}
|
||||||
|
.todo-list {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.todo-list li {
|
||||||
|
position: relative;
|
||||||
|
font-size: 24px;
|
||||||
|
border-bottom: 1px solid #ededed;
|
||||||
|
}
|
||||||
|
.todo-list li:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.todo-list li.editing {
|
||||||
|
border-bottom: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.todo-list li.editing .edit {
|
||||||
|
display: block;
|
||||||
|
width: 506px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
margin: 0 0 0 43px;
|
||||||
|
}
|
||||||
|
.todo-list li.editing .view {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.todo-list li .toggle {
|
||||||
|
text-align: center;
|
||||||
|
width: 40px;
|
||||||
|
/* auto, since non-WebKit browsers doesn't support input styling */
|
||||||
|
height: auto;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto 0;
|
||||||
|
border: none;
|
||||||
|
/* Mobile Safari */
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
.todo-list li .toggle {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.todo-list li .toggle+label {
|
||||||
|
/*
|
||||||
|
Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
|
||||||
|
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
|
||||||
|
*/
|
||||||
|
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center left;
|
||||||
|
background-size: 36px;
|
||||||
|
}
|
||||||
|
.todo-list li .toggle:checked+label {
|
||||||
|
background-size: 36px;
|
||||||
|
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
|
||||||
|
}
|
||||||
|
.todo-list li label {
|
||||||
|
word-break: break-all;
|
||||||
|
padding: 15px 15px 15px 50px;
|
||||||
|
display: block;
|
||||||
|
line-height: 1.0;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: color 0.4s;
|
||||||
|
}
|
||||||
|
.todo-list li.completed label {
|
||||||
|
color: #d9d9d9;
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
.todo-list li .destroy {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 10px;
|
||||||
|
bottom: 0;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin: auto 0;
|
||||||
|
font-size: 30px;
|
||||||
|
color: #cc9a9a;
|
||||||
|
transition: color 0.2s ease-out;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.todo-list li .destroy:hover {
|
||||||
|
color: #af5b5e;
|
||||||
|
}
|
||||||
|
.todo-list li .destroy:after {
|
||||||
|
content: '×';
|
||||||
|
}
|
||||||
|
.todo-list li:hover .destroy {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.todo-list li .edit {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.todo-list li.editing:last-child {
|
||||||
|
margin-bottom: -1px;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
color: #777;
|
||||||
|
position: relative;
|
||||||
|
padding: 10px 15px;
|
||||||
|
height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
border-top: 1px solid #e6e6e6;
|
||||||
|
}
|
||||||
|
.footer:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 40px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
.todo-count {
|
||||||
|
float: left;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.todo-count strong {
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
.filters {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.filters li {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.filters li a {
|
||||||
|
color: inherit;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 3px 7px;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.filters li a:hover {
|
||||||
|
border-color: rgba(175, 47, 47, 0.1);
|
||||||
|
}
|
||||||
|
.filters li a.selected {
|
||||||
|
border-color: rgba(175, 47, 47, 0.2);
|
||||||
|
}
|
||||||
|
.clear-completed,
|
||||||
|
html .clear-completed:active {
|
||||||
|
float: right;
|
||||||
|
position: relative;
|
||||||
|
line-height: 20px;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.clear-completed:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
margin: 65px auto 0;
|
||||||
|
color: #bfbfbf;
|
||||||
|
font-size: 10px;
|
||||||
|
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.info p {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.info a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.info a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Hack to remove background from Mobile Safari.
|
||||||
|
Can't use it globally since it destroys checkboxes in Firefox
|
||||||
|
*/
|
||||||
|
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||||
|
.toggle-all,
|
||||||
|
.todo-list li .toggle {
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
.todo-list li .toggle {
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 430px) {
|
||||||
|
.footer {
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
.filters {
|
||||||
|
bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
127
src/views/find/components/TodoList/index.vue
Normal file
127
src/views/find/components/TodoList/index.vue
Normal file
@ -0,0 +1,127 @@
|
|||||||
|
<template>
|
||||||
|
<section class="todoapp">
|
||||||
|
<!-- header -->
|
||||||
|
<header class="header">
|
||||||
|
<input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
|
||||||
|
</header>
|
||||||
|
<!-- main section -->
|
||||||
|
<section v-show="todos.length" class="main">
|
||||||
|
<input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">
|
||||||
|
<label for="toggle-all" />
|
||||||
|
<ul class="todo-list">
|
||||||
|
<todo
|
||||||
|
v-for="(todo, index) in filteredTodos"
|
||||||
|
:key="index"
|
||||||
|
:todo="todo"
|
||||||
|
@toggleTodo="toggleTodo"
|
||||||
|
@editTodo="editTodo"
|
||||||
|
@deleteTodo="deleteTodo"
|
||||||
|
/>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<!-- footer -->
|
||||||
|
<footer v-show="todos.length" class="footer">
|
||||||
|
<span class="todo-count">
|
||||||
|
<strong>{{ remaining }}</strong>
|
||||||
|
{{ remaining | pluralize('item') }} left
|
||||||
|
</span>
|
||||||
|
<ul class="filters">
|
||||||
|
<li v-for="(val, key) in filters" :key="key">
|
||||||
|
<a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
|
||||||
|
Clear completed
|
||||||
|
</button> -->
|
||||||
|
</footer>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Todo from './Todo.vue'
|
||||||
|
|
||||||
|
const STORAGE_KEY = 'todos'
|
||||||
|
const filters = {
|
||||||
|
all: todos => todos,
|
||||||
|
active: todos => todos.filter(todo => !todo.done),
|
||||||
|
completed: todos => todos.filter(todo => todo.done)
|
||||||
|
}
|
||||||
|
const defalutList = [
|
||||||
|
{ text: 'star this repository', done: false },
|
||||||
|
{ text: 'fork this repository', done: false },
|
||||||
|
{ text: 'follow author', done: false },
|
||||||
|
{ text: 'vue-element-admin', done: true },
|
||||||
|
{ text: 'vue', done: true },
|
||||||
|
{ text: 'element-ui', done: true },
|
||||||
|
{ text: 'axios', done: true },
|
||||||
|
{ text: 'webpack', done: true }
|
||||||
|
]
|
||||||
|
export default {
|
||||||
|
components: { Todo },
|
||||||
|
filters: {
|
||||||
|
pluralize: (n, w) => n === 1 ? w : w + 's',
|
||||||
|
capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
visibility: 'all',
|
||||||
|
filters,
|
||||||
|
// todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
|
||||||
|
todos: defalutList
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
allChecked() {
|
||||||
|
return this.todos.every(todo => todo.done)
|
||||||
|
},
|
||||||
|
filteredTodos() {
|
||||||
|
return filters[this.visibility](this.todos)
|
||||||
|
},
|
||||||
|
remaining() {
|
||||||
|
return this.todos.filter(todo => !todo.done).length
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setLocalStorage() {
|
||||||
|
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
|
||||||
|
},
|
||||||
|
addTodo(e) {
|
||||||
|
const text = e.target.value
|
||||||
|
if (text.trim()) {
|
||||||
|
this.todos.push({
|
||||||
|
text,
|
||||||
|
done: false
|
||||||
|
})
|
||||||
|
this.setLocalStorage()
|
||||||
|
}
|
||||||
|
e.target.value = ''
|
||||||
|
},
|
||||||
|
toggleTodo(val) {
|
||||||
|
val.done = !val.done
|
||||||
|
this.setLocalStorage()
|
||||||
|
},
|
||||||
|
deleteTodo(todo) {
|
||||||
|
this.todos.splice(this.todos.indexOf(todo), 1)
|
||||||
|
this.setLocalStorage()
|
||||||
|
},
|
||||||
|
editTodo({ todo, value }) {
|
||||||
|
todo.text = value
|
||||||
|
this.setLocalStorage()
|
||||||
|
},
|
||||||
|
clearCompleted() {
|
||||||
|
this.todos = this.todos.filter(todo => !todo.done)
|
||||||
|
this.setLocalStorage()
|
||||||
|
},
|
||||||
|
toggleAll({ done }) {
|
||||||
|
this.todos.forEach(todo => {
|
||||||
|
todo.done = done
|
||||||
|
this.setLocalStorage()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@import './index.scss';
|
||||||
|
</style>
|
||||||
55
src/views/find/components/TransactionTable.vue
Normal file
55
src/views/find/components/TransactionTable.vue
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
<template>
|
||||||
|
<el-table :data="list" style="width: 100%;padding-top: 15px;">
|
||||||
|
<el-table-column label="Order_No" min-width="200">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
{{ scope.row.order_no | orderNoFilter }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="Price" width="195" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
¥{{ scope.row.price | toThousandFilter }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="Status" width="100" align="center">
|
||||||
|
<template slot-scope="{row}">
|
||||||
|
<el-tag :type="row.status | statusFilter">
|
||||||
|
{{ row.status }}
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { transactionList } from '@/api/remote-search'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
filters: {
|
||||||
|
statusFilter(status) {
|
||||||
|
const statusMap = {
|
||||||
|
success: 'success',
|
||||||
|
pending: 'danger'
|
||||||
|
}
|
||||||
|
return statusMap[status]
|
||||||
|
},
|
||||||
|
orderNoFilter(str) {
|
||||||
|
return str.substring(0, 30)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
list: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.fetchData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
fetchData() {
|
||||||
|
transactionList().then(response => {
|
||||||
|
this.list = response.data.items.slice(0, 8)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
55
src/views/find/components/mixins/resize.js
Normal file
55
src/views/find/components/mixins/resize.js
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
import { debounce } from '@/utils'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
$_sidebarElm: null,
|
||||||
|
$_resizeHandler: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$_resizeHandler = debounce(() => {
|
||||||
|
if (this.chart) {
|
||||||
|
this.chart.resize()
|
||||||
|
}
|
||||||
|
}, 100)
|
||||||
|
this.$_initResizeEvent()
|
||||||
|
this.$_initSidebarResizeEvent()
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.$_destroyResizeEvent()
|
||||||
|
this.$_destroySidebarResizeEvent()
|
||||||
|
},
|
||||||
|
// to fixed bug when cached by keep-alive
|
||||||
|
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
|
||||||
|
activated() {
|
||||||
|
this.$_initResizeEvent()
|
||||||
|
this.$_initSidebarResizeEvent()
|
||||||
|
},
|
||||||
|
deactivated() {
|
||||||
|
this.$_destroyResizeEvent()
|
||||||
|
this.$_destroySidebarResizeEvent()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// use $_ for mixins properties
|
||||||
|
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||||
|
$_initResizeEvent() {
|
||||||
|
window.addEventListener('resize', this.$_resizeHandler)
|
||||||
|
},
|
||||||
|
$_destroyResizeEvent() {
|
||||||
|
window.removeEventListener('resize', this.$_resizeHandler)
|
||||||
|
},
|
||||||
|
$_sidebarResizeHandler(e) {
|
||||||
|
if (e.propertyName === 'width') {
|
||||||
|
this.$_resizeHandler()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
$_initSidebarResizeEvent() {
|
||||||
|
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||||
|
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||||
|
},
|
||||||
|
$_destroySidebarResizeEvent() {
|
||||||
|
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
240
src/views/find/index.vue
Normal file
240
src/views/find/index.vue
Normal file
@ -0,0 +1,240 @@
|
|||||||
|
<template>
|
||||||
|
<div class="find-container">
|
||||||
|
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||||
|
<h1>Personen finden</h1>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||||
|
<div class="components-container">
|
||||||
|
<el-drag-select
|
||||||
|
v-model="value"
|
||||||
|
style="width:500px;"
|
||||||
|
multiple
|
||||||
|
filterable
|
||||||
|
allow-create
|
||||||
|
placeholder="Wähle einen Skill"
|
||||||
|
>
|
||||||
|
|
||||||
|
<el-option v-for="item in skills_options" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
|
</el-drag-select>
|
||||||
|
|
||||||
|
<div style="margin-top:30px;">
|
||||||
|
<el-tag v-for="item of value" :key="item" style="margin-right:15px;">
|
||||||
|
{{ item }}
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-row v-if="value.length > 0" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||||
|
<h3>Übereinstimmungen:</h3>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<el-row v-if="results.length > 0" :gutter="8">
|
||||||
|
<el-col v-for="person in results" :key="person.name" :xs="{span: 24}" style="margin-bottom:30px;">
|
||||||
|
<box-card v-key="person.name" :person="person" />
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row v-if="value.length > 0 && results.length == 0" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||||
|
<h3>Es konnten keine Übereinstimmung gefunden werden</h3>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import ElDragSelect from '@/components/DragSelect' // base on element-ui
|
||||||
|
import BoxCard from './components/BoxCard'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'FindForm',
|
||||||
|
components: {
|
||||||
|
ElDragSelect,
|
||||||
|
BoxCard
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
value: [],
|
||||||
|
skills_options: [{
|
||||||
|
value: 'Frontend Entwicklung',
|
||||||
|
label: 'Frontend Entwicklung'
|
||||||
|
}, {
|
||||||
|
value: 'Buchhaltung',
|
||||||
|
label: 'Buchhaltung'
|
||||||
|
}, {
|
||||||
|
value: 'Projektmanagement',
|
||||||
|
label: 'Projektmanagement'
|
||||||
|
}, {
|
||||||
|
value: 'Backend-Entwicklung',
|
||||||
|
label: 'Backend-Entwicklung'
|
||||||
|
}, {
|
||||||
|
value: 'Projektorganinisation',
|
||||||
|
label: 'Projektorganinisation'
|
||||||
|
}, {
|
||||||
|
value: 'Markenschutz',
|
||||||
|
label: 'Markenschutz'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Patentrechte',
|
||||||
|
label: 'Patentrechte'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Projectorganinisation',
|
||||||
|
label: 'Projectorganinisation'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Soziale Medien',
|
||||||
|
label: 'Soziale Medien'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Online Marketing',
|
||||||
|
label: 'Online Marketing'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'offline-marketing',
|
||||||
|
label: 'Offline Marketing'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'konflikt-management',
|
||||||
|
label: 'Konflikt-Management'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Verhandlungsführung',
|
||||||
|
label: 'Verhandlungsführung'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Headhunting',
|
||||||
|
label: 'Headhunting'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Typographiedesign',
|
||||||
|
label: 'Typographiedesign'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Appdesign',
|
||||||
|
label: 'Appdesign'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Webdesign',
|
||||||
|
label: 'Webdesign'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Finanzamtsangelegenheiten',
|
||||||
|
label: 'Finanzamtsangelegenheiten'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Arbeitsplatzsicherheit',
|
||||||
|
label: 'Arbeitsplatzsicherheit'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Blockchain',
|
||||||
|
label: 'Blockchain'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Audio',
|
||||||
|
label: 'Audio'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Video',
|
||||||
|
label: 'Video'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Reiseplanung',
|
||||||
|
label: 'Reiseplanung'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
people: [{
|
||||||
|
name: 'Franz Fiedler',
|
||||||
|
avatar: 'https://www.fhstp.ac.at/de/uber-uns/mitarbeiter-innen-a-z/fidler-franz/@@images/c23cc24d-3c45-42c8-9159-c196d19ced81.jpeg',
|
||||||
|
skills: [
|
||||||
|
{ name: 'Blockchain', strength: 100 }
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
name: 'Wolfgang Römer',
|
||||||
|
avatar: 'https://www.fhstp.ac.at/en/about-us/staff-a-z/romer-wolfgang/@@images/8fbd0752-ed91-4cb0-8c9f-b4a3da187763.jpeg',
|
||||||
|
skills: [
|
||||||
|
{ name: 'Blockchain', strength: 100 }
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
name: 'Lukas Bachschwell',
|
||||||
|
avatar: 'https://lbsfilm.at/media/pages/about/1056669128-1567191147/square-small.jpg',
|
||||||
|
skills: [
|
||||||
|
{ name: 'Blockchain', strength: 75 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Victoria Kasamas',
|
||||||
|
matchterm: 'Buchhaltung',
|
||||||
|
skills: [
|
||||||
|
{ name: 'Buchhaltung', strength: 83 }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Anna Steinacher',
|
||||||
|
avatar: 'https://media.licdn.com/dms/image/C5603AQEuI2luHoKYcA/profile-displayphoto-shrink_800_800/0?e=1582761600&v=beta&t=Xq0C49tI4WBsaZw5ROmTPGx4g93AElaOkt4X96y3u8w',
|
||||||
|
skills: [
|
||||||
|
{ name: 'Reiseplanung', strength: 98 },
|
||||||
|
{ name: 'Video', strength: 65 }
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
name: 'Peter Steiner',
|
||||||
|
skills: [
|
||||||
|
{ name: 'Audio', strength: 98 },
|
||||||
|
{ name: 'Video', strength: 85 },
|
||||||
|
{ name: 'Programming', strength: 12 },
|
||||||
|
{ name: 'Buchhaltung', strength: 19 }
|
||||||
|
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
name: 'Alex Rodriguez',
|
||||||
|
avatar: 'https://upload.wikimedia.org/wikipedia/commons/7/72/Alex_Rodriguez.jpg',
|
||||||
|
skills: [
|
||||||
|
{ name: 'Blockchain', strength: 1 }
|
||||||
|
]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
results: function() {
|
||||||
|
const resultarray = []
|
||||||
|
this.people.forEach((person) => {
|
||||||
|
for (let i = 0; i < person.skills.length; i++) {
|
||||||
|
if (this.value.includes(person.skills[i].name)) {
|
||||||
|
resultarray.push(person)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return resultarray
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dashboard-editor-container {
|
||||||
|
padding: 32px;
|
||||||
|
background-color: rgb(240, 242, 245);
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.github-corner {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
border: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-wrapper {
|
||||||
|
background: #fff;
|
||||||
|
padding: 16px 16px 0;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:1024px) {
|
||||||
|
.chart-wrapper {
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user