UP 调整菜单
This commit is contained in:
sakuya
parent
54534fe235
commit
4b2063ff6a
File diff suppressed because one or more lines are too long
|
|
@ -27,6 +27,13 @@ export default {
|
|||
return await http.get(this.url, params);
|
||||
}
|
||||
},
|
||||
list: {
|
||||
url: `${config.API_URL}/demo/list`,
|
||||
name: "数据列表",
|
||||
get: async function(params){
|
||||
return await http.get(this.url, params);
|
||||
}
|
||||
},
|
||||
menu: {
|
||||
url: `${config.API_URL}/demo/menu`,
|
||||
name: "普通用户菜单",
|
||||
|
|
|
|||
|
|
@ -3,12 +3,13 @@
|
|||
.el-menu .el-menu-item a {color: inherit;text-decoration: none;display: block;width:100%;height:100%;position: absolute;top:0px;left:0px;}
|
||||
.el-form-item-msg {font-size: 12px;color: #999;clear: both;width: 100%;}
|
||||
.el-container {height: 100%;}
|
||||
.el-aside {border-right: 1px solid #e6e6e6;background: #fff;}
|
||||
.el-header {background: #fff;border-bottom: 1px solid #e6e6e6;padding:13px 15px;display: flex;justify-content: space-between;align-items: center;}
|
||||
.el-aside {border-right: 1px solid var(--el-border-color-light);}
|
||||
.el-container + .el-aside {border-right: 0;border-left: 1px solid var(--el-border-color-light);}
|
||||
.el-header {background: #fff;border-bottom: 1px solid var(--el-border-color-light);padding:13px 15px;display: flex;justify-content: space-between;align-items: center;}
|
||||
.el-header .left-panel {display: flex;align-items: center;}
|
||||
.el-header .right-panel {display: flex;align-items: center;}
|
||||
.el-header .right-panel > * + * {margin-left:10px;}
|
||||
.el-footer {background: #fff;border-top: 1px solid #e6e6e6;padding:13px 15px;}
|
||||
.el-footer {background: #fff;border-top: 1px solid var(--el-border-color-light);padding:13px 15px;height: 51px;}
|
||||
.el-main {padding:15px;}
|
||||
.el-main.nopadding {padding:0;background: #fff;}
|
||||
.el-drawer__body {overflow: auto;padding:0;}
|
||||
|
|
@ -42,6 +43,8 @@
|
|||
.el-table.el-table--large {font-size: 14px;}
|
||||
.el-table.el-table--small {font-size: 12px;}
|
||||
.el-table {font-size: 12px;}
|
||||
.el-radio-button__inner {font-size: 12px;}
|
||||
.el-checkbox-button__inner {font-size: 12px;}
|
||||
|
||||
.aminui-side-split li.active {background-color: var(--el-color-primary);}
|
||||
.adminui-tags li:hover {background-color: var(--el-color-primary-light-9);}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,9 @@
|
|||
.static-table td {border-bottom: 1px solid #dcdfe6;padding: 15px;max-width: 250px;color: #606266;}
|
||||
|
||||
/*header-tabs*/
|
||||
.header-tabs {padding:0;display:block;border:0!important;height:auto;}
|
||||
.header-tabs .el-tabs {border:0;box-shadow:none;}
|
||||
.header-tabs {padding:10px 0 0 0;display:block;border:0!important;height:50px;background: none;}
|
||||
.header-tabs .el-tabs__header {padding-left:10px;margin: 0;}
|
||||
.header-tabs .el-tabs__content {display: none;}
|
||||
.header-tabs .el-tabs__item {font-size: 12px;}
|
||||
.header-tabs .el-tabs__nav {border-radius: 0 !important;}
|
||||
.header-tabs .el-tabs__item {font-size: 13px;}
|
||||
.header-tabs .el-tabs__item.is-active {background-color: var(--el-bg-color-overlay);}
|
||||
|
|
|
|||
|
|
@ -1,154 +0,0 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-main class="nopadding">
|
||||
<el-calendar v-model="toDay">
|
||||
<template #dateCell="{data}">
|
||||
<div class="calendar-item">
|
||||
<h2>{{ data.day.split('-')[2] }}</h2>
|
||||
<div v-if="getData(data.day) && data.type=='current-month'" class="calendar-item-info">
|
||||
<p><el-progress :percentage="getData(data.day).plan" :show-text="false"></el-progress></p>
|
||||
<p><el-progress :percentage="getData(data.day).complete" status="success" :show-text="false"></el-progress></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-calendar>
|
||||
</el-main>
|
||||
<el-aside style="width: 400px;border-left: 1px solid #e6e6e6;">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<h2 class="dayTitle"><el-icon><el-icon-calendar /></el-icon>{{day}}</h2>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<div class="task-list">
|
||||
<template v-if="dayItem">
|
||||
<el-card shadow="hover" v-for="task in dayItem.tasks" :key="task.id" :class="stateMap[task.state]">
|
||||
<h2>{{task.title}}</h2>
|
||||
<div class="task-bottom">
|
||||
<div class="tags">
|
||||
<el-tag type="info" size="small">#{{task.id}}</el-tag>
|
||||
<el-tag v-if="task.state=='open'" type="info" size="small">{{task.state}}</el-tag>
|
||||
<el-tag v-if="task.state=='complete'" type="success" size="small">{{task.state}}</el-tag>
|
||||
<el-tag v-if="task.state=='timeout'" type="danger" size="small">{{task.state}}</el-tag>
|
||||
</div>
|
||||
<el-avatar :size="20" :src="task.avatar"></el-avatar>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-empty description="无工作任务" :image-size="100"></el-empty>
|
||||
</template>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'calendar',
|
||||
data(){
|
||||
return {
|
||||
stateMap: {
|
||||
open: "open",
|
||||
complete: "complete",
|
||||
timeout: "timeout"
|
||||
},
|
||||
toDay: new Date(this.demoDay()),
|
||||
data: {
|
||||
[this.demoDay()]: {
|
||||
plan: 80,
|
||||
complete: 66,
|
||||
tasks: [
|
||||
{
|
||||
id: "3601",
|
||||
title: "vite2 on demand loading popconfirm style missing",
|
||||
avatar: "img/avatar.jpg",
|
||||
state: "complete"
|
||||
},
|
||||
{
|
||||
id: "3602",
|
||||
title: "Switch prevent switching invalid",
|
||||
avatar: "img/avatar.jpg",
|
||||
state: "complete"
|
||||
},
|
||||
{
|
||||
id: "3603",
|
||||
title: "The use of paging in vue3 is inconsistent with the official UI display",
|
||||
avatar: "img/avatar.jpg",
|
||||
state: "timeout"
|
||||
}
|
||||
]
|
||||
},
|
||||
[this.demoDay(1)]: {
|
||||
plan: 80,
|
||||
complete: 0,
|
||||
tasks: [
|
||||
{
|
||||
id: "3604",
|
||||
title: "el-switch @change is auto triggered when page load",
|
||||
avatar: "img/avatar.jpg",
|
||||
state: "open"
|
||||
}
|
||||
]
|
||||
},
|
||||
[this.demoDay(2)]: {
|
||||
plan: 80,
|
||||
complete: 0,
|
||||
tasks: [
|
||||
{
|
||||
id: "3605",
|
||||
title: "locale plugin problem happen in production mode when install element-plus on demand",
|
||||
avatar: "img/avatar.jpg",
|
||||
state: "open"
|
||||
},
|
||||
{
|
||||
id: "3606",
|
||||
title: "table uses fixed=right, which leads to the dislocation of hover style",
|
||||
avatar: "img/avatar.jpg",
|
||||
state: "open"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
day(){
|
||||
return this.$TOOL.dateFormat(this.toDay,"yyyy-MM-dd");
|
||||
},
|
||||
dayItem(){
|
||||
return this.getData(this.day)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getData(date){
|
||||
return this.data[date]
|
||||
},
|
||||
demoDay(n=0){
|
||||
var curDate = new Date()
|
||||
var oneDayTime = 24*60*60*1000
|
||||
var rDate = new Date(curDate.getTime() + (oneDayTime*n) )
|
||||
return this.$TOOL.dateFormat(rDate, "yyyy-MM-dd");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.calendar-item h2 {font-size: 14px;}
|
||||
.calendar-item-info {margin-top: 15px;}
|
||||
.calendar-item-info p {margin-top: 5px;}
|
||||
|
||||
.task-list .el-card {margin-bottom: 15px;border-left: 5px solid #ddd;cursor: pointer;}
|
||||
|
||||
.task-list .el-card.open {border-color: #ddd;}
|
||||
.task-list .el-card.complete {border-color: #67C23A;}
|
||||
.task-list .el-card.timeout {border-color: #f56c6c;}
|
||||
|
||||
.task-list h2 {font-size: 14px;font-weight: normal;}
|
||||
.task-bottom {display: flex;justify-content: space-between;align-items: center;margin-top: 10px;}
|
||||
.task-bottom .tags .el-tag {margin-right: 5px;}
|
||||
.dayTitle {font-size: 14px;display: flex;align-items: center;}
|
||||
.dayTitle i {color: #999;margin-right: 10px;}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-aside>
|
||||
<el-container>
|
||||
<el-header>Left Header</el-header>
|
||||
<el-main>Left Main</el-main>
|
||||
<el-footer>Left Footer</el-footer>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-header>Header</el-header>
|
||||
<el-main class="nopadding">
|
||||
<el-result icon="info" title="Tip" sub-title="可根据 <el-container> <el-header> <el-aside> <el-main> <el-footer> 灵活运用达到各种布局"></el-result>
|
||||
</el-main>
|
||||
<el-footer>Footer</el-footer>
|
||||
</el-container>
|
||||
<el-aside>
|
||||
<el-container>
|
||||
<el-header>Right Header</el-header>
|
||||
<el-main>Right Main</el-main>
|
||||
<el-footer>Right Footer</el-footer>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'layoutLCR',
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-header>Header</el-header>
|
||||
<el-main class="nopadding">
|
||||
<el-result icon="info" title="Tip" sub-title="可根据 <el-container> <el-header> <el-aside> <el-main> <el-footer> 灵活运用达到各种布局"></el-result>
|
||||
</el-main>
|
||||
<el-footer>Footer</el-footer>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'layoutTCB',
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -1,239 +0,0 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-header style="display: block;height:auto;">
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="6">
|
||||
<sc-statistic title="数量" value="12" suffix="项"></sc-statistic>
|
||||
</el-col>
|
||||
<el-col :lg="6">
|
||||
<sc-statistic title="总进度" value="70.0" suffix="%"></sc-statistic>
|
||||
</el-col>
|
||||
<el-col :lg="6">
|
||||
<sc-statistic title="收入" value="0.0" prefix="¥" groupSeparator></sc-statistic>
|
||||
</el-col>
|
||||
<el-col :lg="6">
|
||||
<sc-statistic title="支出" value="200" prefix="¥" groupSeparator></sc-statistic>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-header>
|
||||
<el-header class="header-tabs">
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="所有"></el-tab-pane>
|
||||
<el-tab-pane label="未完成 (2)"></el-tab-pane>
|
||||
<el-tab-pane label="弃坑"></el-tab-pane>
|
||||
<el-tab-pane label="其他"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-header>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
|
||||
<el-button v-if="selection.length>0" type="danger" plain icon="el-icon-delete"></el-button>
|
||||
<el-button v-if="selection.length>0">变更状态</el-button>
|
||||
<el-button v-if="selection.length>0">推送至队列</el-button>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<div class="right-panel-search">
|
||||
<scFilterBar :options="options" @change="change"></scFilterBar>
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable tableName="templateList" ref="table" :data="list" :column="column" @selection-change="selectionChange" stripe>
|
||||
|
||||
<!-- 各列自定义template -->
|
||||
<template #state="scope">
|
||||
<sc-status-indicator v-if="scope.row.state=='1'" type="primary"></sc-status-indicator>
|
||||
<sc-status-indicator v-if="scope.row.state=='2'" pulse type="danger"></sc-status-indicator>
|
||||
</template>
|
||||
<template #name="scope">
|
||||
<h4>{{scope.row.name}}</h4>
|
||||
<p>{{scope.row.subtitle}}</p>
|
||||
</template>
|
||||
<template #type="scope">
|
||||
<el-tag>{{scope.row.type}}</el-tag>
|
||||
</template>
|
||||
<template #progress="scope">
|
||||
<el-progress v-if="scope.row.state=='1'" :percentage="scope.row.progress"></el-progress>
|
||||
<el-progress v-if="scope.row.state=='2'" :percentage="scope.row.progress" status="exception"></el-progress>
|
||||
</template>
|
||||
|
||||
<!-- 固定列-选择列 -->
|
||||
<el-table-column type="selection" width="50" fixed></el-table-column>
|
||||
|
||||
<!-- 固定列-操作列 -->
|
||||
<el-table-column label="操作" fixed="right" align="right" width="160">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" plain size="small" @click="table_show(scope.row, scope.$index)">查看</el-button>
|
||||
<el-dropdown>
|
||||
<el-button plain size="small">更多<el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon></el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="table_edit(scope.row, scope.$index)">编辑</el-dropdown-item>
|
||||
<el-dropdown-item>推送至队列</el-dropdown-item>
|
||||
<el-dropdown-item divided>删除</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
<el-drawer v-model="info" :size="800" custom-class="drawerBG" direction="rtl" destroy-on-close>
|
||||
<info></info>
|
||||
</el-drawer>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scStatistic from '@/components/scStatistic';
|
||||
import scFilterBar from '@/components/scFilterBar';
|
||||
import info from './info'
|
||||
|
||||
export default {
|
||||
name: 'list',
|
||||
components: {
|
||||
scStatistic,
|
||||
scFilterBar,
|
||||
info
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
{
|
||||
label: '名称',
|
||||
value: 'name',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
label: '类型',
|
||||
value: 'type',
|
||||
type: 'select',
|
||||
extend: {
|
||||
multiple: true,
|
||||
data:[
|
||||
{
|
||||
label: "数据",
|
||||
value: "1"
|
||||
},
|
||||
{
|
||||
label: "表单",
|
||||
value: "2"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '创建时间',
|
||||
value: 'date',
|
||||
type: 'daterange',
|
||||
}
|
||||
],
|
||||
column: [
|
||||
{
|
||||
label: "ID",
|
||||
prop: "id",
|
||||
width: "100",
|
||||
sortable: true,
|
||||
hide: true,
|
||||
},
|
||||
{
|
||||
label: "名称",
|
||||
prop: "name",
|
||||
width: "300"
|
||||
},
|
||||
{
|
||||
label: "状态",
|
||||
prop: "state",
|
||||
width: "100",
|
||||
filters: [{text: '正常', value: '1'}, {text: '异常', value: '2'}]
|
||||
},
|
||||
{
|
||||
label: "类型",
|
||||
prop: "type",
|
||||
width: "100",
|
||||
filters: [{text: '数据', value: '数据'}, {text: '表单', value: '表单'}]
|
||||
},
|
||||
{
|
||||
label: "负责人",
|
||||
prop: "user",
|
||||
width: "100"
|
||||
},
|
||||
{
|
||||
label: "进度",
|
||||
prop: "progress",
|
||||
width: "250"
|
||||
},
|
||||
{
|
||||
label: "创建时间",
|
||||
prop: "time",
|
||||
width: "150",
|
||||
sortable: true
|
||||
},
|
||||
],
|
||||
group: "0",
|
||||
selection: [],
|
||||
list: [],
|
||||
info: false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.list = [
|
||||
{
|
||||
id: "5001",
|
||||
name: "scEcharts",
|
||||
subtitle: "重新封装的Echarts，暴露源对象",
|
||||
state: "1",
|
||||
type: "数据",
|
||||
progress: 70,
|
||||
user: "Sakuya",
|
||||
time: "2010-10-10"
|
||||
},
|
||||
{
|
||||
id: "5002",
|
||||
name: "scEditor",
|
||||
subtitle: "Tinymce封装的富文本编辑器",
|
||||
state: "2",
|
||||
type: "表单",
|
||||
progress: 40,
|
||||
user: "Sakuya",
|
||||
time: "2010-10-10"
|
||||
}
|
||||
]
|
||||
},
|
||||
methods: {
|
||||
//表格选择后回调事件
|
||||
selectionChange(selection){
|
||||
this.selection = selection;
|
||||
},
|
||||
add(){
|
||||
this.$router.push({
|
||||
path: `/template/list/save`
|
||||
});
|
||||
},
|
||||
table_show(row, index){
|
||||
console.log(row, index);
|
||||
this.info = true;
|
||||
},
|
||||
table_edit(row){
|
||||
this.$router.push({
|
||||
path: `/template/list/save`,
|
||||
query: {
|
||||
id: row.id
|
||||
}
|
||||
});
|
||||
},
|
||||
filterHandler(value, row, column){
|
||||
const property = column.property;
|
||||
return row[property] === value;
|
||||
},
|
||||
change(data){
|
||||
console.log(data);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
@ -1,153 +0,0 @@
|
|||
<template>
|
||||
<el-main style="padding:0 20px;">
|
||||
|
||||
<el-steps :active="3" finish-status="success" align-center style="margin-bottom:40px;">
|
||||
<el-step title="立项"></el-step>
|
||||
<el-step title="调研"></el-step>
|
||||
<el-step title="设计"></el-step>
|
||||
<el-step title="开发"></el-step>
|
||||
<el-step title="完成"></el-step>
|
||||
</el-steps>
|
||||
|
||||
<div class="make">
|
||||
<div class="make-left">
|
||||
<el-button type="primary">主要操作</el-button>
|
||||
<el-button>次要操作</el-button>
|
||||
<el-button>次要操作</el-button>
|
||||
<el-dropdown>
|
||||
<el-button icon="el-icon-arrow-down"></el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>更改状态</el-dropdown-item>
|
||||
<el-dropdown-item>发送队列</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="make-right">
|
||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-card shadow="never" header="统计">
|
||||
<sc-echarts ref="chart" height="150px" :option="option"></sc-echarts>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never">
|
||||
<el-tabs>
|
||||
<el-tab-pane label="基础信息">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="ID">5001</el-descriptions-item>
|
||||
<el-descriptions-item label="名称">scEcharts</el-descriptions-item>
|
||||
<el-descriptions-item label="参与者">
|
||||
<el-tag size="small">Sakuya</el-tag>
|
||||
<el-tag size="small">Lolowan</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="类型">数据</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">2010-10-10</el-descriptions-item>
|
||||
<el-descriptions-item label="进度">70%</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="详细信息">
|
||||
<el-empty description="没有详细信息" :image-size="80"></el-empty>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" header="日志">
|
||||
<el-timeline style="padding-left: 10px;padding-top: 10px;">
|
||||
<el-timeline-item v-for="(item, index) in logs" :key="index" :timestamp="item.timestamp" :color="index==0?'#409EFF':''">
|
||||
<div class="log-item">
|
||||
<el-avatar class="avatar" :size="24" :src="item.icon"></el-avatar>
|
||||
<span class="user">{{item.user}}</span>
|
||||
<p>{{item.content}}</p>
|
||||
</div>
|
||||
<div v-if="item.msg" class="log-msg">
|
||||
<el-alert :title="item.msg" :closable="false"></el-alert>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</el-card>
|
||||
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scEcharts from '@/components/scEcharts';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
scEcharts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
option: {
|
||||
grid: {
|
||||
top: '10px'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [{
|
||||
data: [120, 200, 150, 80, 70, 110, 130],
|
||||
type: 'bar',
|
||||
barWidth: '15px',
|
||||
itemStyle: {
|
||||
borderRadius:[15, 15, 0, 0]
|
||||
}
|
||||
},
|
||||
{
|
||||
data: [110, 180, 120, 120, 60, 90, 110],
|
||||
type: 'line',
|
||||
smooth: true
|
||||
}]
|
||||
},
|
||||
logs: [
|
||||
{
|
||||
user: 'Lolowan',
|
||||
icon: 'img/avatar2.gif',
|
||||
content: '完成设计',
|
||||
msg: '@Sakuya 设计完成了，赶紧开发吧',
|
||||
timestamp: '2021-10-13 13:41:19'
|
||||
},
|
||||
{
|
||||
user: 'Sakuya',
|
||||
icon: 'img/avatar.jpg',
|
||||
content: '完成调研',
|
||||
msg: '',
|
||||
timestamp: '2021-10-11 22:08:30'
|
||||
},
|
||||
{
|
||||
user: 'Sakuya',
|
||||
icon: 'img/avatar.jpg',
|
||||
content: '创建立项',
|
||||
msg: '',
|
||||
timestamp: '2021-10-10 08:31:23'
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-card {margin-bottom: 15px;}
|
||||
.make {margin-bottom: 15px;display: flex;justify-content: space-between;align-items: center;}
|
||||
.log-item {display: flex;align-items: center;font-size: 13px;}
|
||||
.log-item .user {color: #333;margin: 0 10px;display: inline-block;}
|
||||
.log-item p {color: #666;}
|
||||
.log-msg {margin-top: 10px;}
|
||||
</style>
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
<!--
|
||||
* @Descripttion: 多路由复用一个路由组件DEMO文件
|
||||
* @version: 1.0
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年7月20日09:28:19
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<sc-page-header :title="id?'ID:'+id:'页面标题'" description="可用于非常复杂的表单提交，如一些较为简单的表单提交应使用dialog或者drawer更合适" icon="el-icon-burger"></sc-page-header>
|
||||
<el-main>
|
||||
<el-alert title="因为keep-alive只接受组件name,导致多路由共用组件时,关闭或刷新一个标签导致其他同一组件的页面缓存失效,后续还在寻找完美的解决方案." type="error" style="margin-bottom: 15px;"></el-alert>
|
||||
<el-card shadow="never">
|
||||
<el-form :model="form" :rules="rules" ref="form" label-width="100px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入名称" clearable></el-input>
|
||||
<div class="el-form-item-msg" data-v-b33b3cf8="">组件名字以sc开头，并坚持以“小驼峰”命名规则</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="缩略图" prop="img">
|
||||
<sc-upload v-model="form.img" title="上传缩略图"></sc-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type">
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio-button label="1">数据</el-radio-button>
|
||||
<el-radio-button label="2">表单</el-radio-button>
|
||||
<el-radio-button label="3">样式</el-radio-button>
|
||||
<el-radio-button label="4">其他</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="负责人" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="进度" prop="img">
|
||||
<el-input v-model="form.name" placeholder="请输入名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="save">保 存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'list-save',
|
||||
data() {
|
||||
return {
|
||||
id: this.$route.query.id,
|
||||
form: {
|
||||
name: "",
|
||||
type: "1"
|
||||
},
|
||||
rules: {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if(this.id){
|
||||
//更改tag标签
|
||||
this.$store.commit("updateViewTagsTitle", `详情ID:${this.id}`)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
save(){
|
||||
console.log(this.$store);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-aside width="40%">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe highlightCurrentRow @row-click="rowClick">
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="ID" prop="id" width="200"></el-table-column>
|
||||
<el-table-column label="评分" prop="num" width="80"></el-table-column>
|
||||
<el-table-column label="进度" prop="progress" width="250" sortable>
|
||||
<template #default="scope">
|
||||
<el-progress :percentage="scope.row.progress" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建日期" prop="datetime" width="150" sortable></el-table-column>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="sontable" :apiObj="list.apiObj" row-key="id" stripe>
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="姓名" prop="name" width="180"></el-table-column>
|
||||
<el-table-column label="状态" prop="type" width="60">
|
||||
<template #default="scope">
|
||||
<sc-status-indicator v-if="scope.row.type==0" type="success"></sc-status-indicator>
|
||||
<sc-status-indicator v-if="scope.row.type==1" pulse type="danger"></sc-status-indicator>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="邮箱" prop="email" width="250"></el-table-column>
|
||||
<el-table-column label="评分" prop="num" width="150"></el-table-column>
|
||||
<el-table-column label="注册时间" prop="datetime" width="150" sortable></el-table-column>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'listSon',
|
||||
data() {
|
||||
return {
|
||||
list: {
|
||||
apiObj: this.$API.demo.list
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
rowClick(row){
|
||||
var params = {
|
||||
groupId: row.id
|
||||
}
|
||||
this.$refs.sontable.reload(params)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-header class="header-tabs">
|
||||
<el-tabs type="card" v-model="groupId" @tab-change="tabChange">
|
||||
<el-tab-pane label="所有" name="0"></el-tab-pane>
|
||||
<el-tab-pane label="未完成" name="1"></el-tab-pane>
|
||||
<el-tab-pane label="已退回" name="2"></el-tab-pane>
|
||||
<el-tab-pane label="已关闭" name="3"></el-tab-pane>
|
||||
<el-tab-pane label="已完成" name="4"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-header>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<div class="right-panel-search">
|
||||
<el-input v-model="search.keyword" placeholder="关键词" clearable></el-input>
|
||||
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe>
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="姓名" prop="name" width="150"></el-table-column>
|
||||
<el-table-column label="性别" prop="sex" width="150"></el-table-column>
|
||||
<el-table-column label="邮箱" prop="email" width="250"></el-table-column>
|
||||
<el-table-column label="评分" prop="num" width="150"></el-table-column>
|
||||
<el-table-column label="注册时间" prop="datetime" width="150" sortable></el-table-column>
|
||||
<el-table-column label="操作" fixed="right" align="right" width="160">
|
||||
<template #default>
|
||||
<el-button-group>
|
||||
<el-button text type="primary" size="small">查看</el-button>
|
||||
<el-button text type="primary" size="small">编辑</el-button>
|
||||
<el-button text type="primary" size="small">删除</el-button>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'listTab',
|
||||
data() {
|
||||
return {
|
||||
groupId: "1",
|
||||
list: {
|
||||
apiObj: this.$API.demo.list
|
||||
},
|
||||
search: {
|
||||
keyword: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//搜索
|
||||
upsearch(){
|
||||
this.$refs.table.upData(this.search)
|
||||
},
|
||||
//标签切换
|
||||
tabChange(name){
|
||||
var params = {
|
||||
groupId: name
|
||||
}
|
||||
this.$refs.table.reload(params)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,128 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-aside width="200px">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<el-tree ref="group" class="menu" node-key="id" :data="groupData" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<div class="right-panel-search">
|
||||
<el-input v-model="search.keyword" placeholder="关键词" clearable></el-input>
|
||||
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe>
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="姓名" prop="name" width="150"></el-table-column>
|
||||
<el-table-column label="性别" prop="sex" width="150"></el-table-column>
|
||||
<el-table-column label="邮箱" prop="email" width="250"></el-table-column>
|
||||
<el-table-column label="评分" prop="num" width="150"></el-table-column>
|
||||
<el-table-column label="注册时间" prop="datetime" width="150" sortable></el-table-column>
|
||||
<el-table-column label="操作" fixed="right" align="right" width="160">
|
||||
<template #default>
|
||||
<el-button-group>
|
||||
<el-button text type="primary" size="small">查看</el-button>
|
||||
<el-button text type="primary" size="small">编辑</el-button>
|
||||
<el-button text type="primary" size="small">删除</el-button>
|
||||
</el-button-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'listTree',
|
||||
data() {
|
||||
return {
|
||||
groupFilterText: "",
|
||||
groupData: [
|
||||
{
|
||||
id: "",
|
||||
label: "所有"
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
label: "华东总部",
|
||||
children: [
|
||||
{
|
||||
id: "11",
|
||||
label: "售前客服部"
|
||||
},
|
||||
{
|
||||
id: "12",
|
||||
label: "技术研发部"
|
||||
},
|
||||
{
|
||||
id: "13",
|
||||
label: "行政人事部"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
label: "华难总部",
|
||||
children: [
|
||||
{
|
||||
id: "21",
|
||||
label: "售前客服部"
|
||||
},
|
||||
{
|
||||
id: "22",
|
||||
label: "技术研发部"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
list: {
|
||||
apiObj: this.$API.demo.list
|
||||
},
|
||||
search: {
|
||||
keyword: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
groupFilterText(val) {
|
||||
this.$refs.group.filter(val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//树过滤
|
||||
groupFilterNode(value, data){
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
},
|
||||
//树点击事件
|
||||
groupClick(data){
|
||||
var params = {
|
||||
groupId: data.id
|
||||
}
|
||||
this.$refs.table.reload(params)
|
||||
},
|
||||
//搜索
|
||||
upsearch(){
|
||||
this.$refs.table.upData(this.search)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -1,617 +0,0 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-aside width="220px">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<el-tree ref="group" class="menu" :data="group" node-key="code" :current-node-key="group[0].code" highlight-current :filter-node-method="groupFilterNode"></el-tree>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
<el-main style="padding:0;">
|
||||
|
||||
<el-tabs class="tabs-pages" stretch>
|
||||
<el-tab-pane label="服务器概况" lazy>
|
||||
<el-main>
|
||||
<el-card shadow="never" header="SQL Server">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<div class="server-top-item">
|
||||
<el-progress type="dashboard" :percentage="25" :stroke-width="8" :width="150"
|
||||
:color="colors">
|
||||
<template #default="{ percentage }">
|
||||
<span class="percentage-value">{{ percentage }}<em>%</em></span>
|
||||
<span class="percentage-label">CPU</span>
|
||||
</template>
|
||||
</el-progress>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="server-top-item">
|
||||
<el-progress type="dashboard" :percentage="33.2" :stroke-width="8" :width="150"
|
||||
:color="colors">
|
||||
<template #default="{ percentage }">
|
||||
<span class="percentage-value">{{ percentage }}<em>%</em></span>
|
||||
<span class="percentage-label">Memory</span>
|
||||
</template>
|
||||
</el-progress>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="server-top-item">
|
||||
<el-progress type="dashboard" :percentage="81.0" :stroke-width="8" :width="150"
|
||||
:color="colors">
|
||||
<template #default="{ percentage }">
|
||||
<span class="percentage-value">{{ percentage }}<em>%</em></span>
|
||||
<span class="percentage-label">Disk</span>
|
||||
</template>
|
||||
</el-progress>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-tabs style="margin-top: 20px;" @tab-click="tabClick">
|
||||
<el-tab-pane label="CPU" lazy>
|
||||
<div class="server-item-info">
|
||||
<div class="title">
|
||||
<label>CPU</label>
|
||||
<span>Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz</span>
|
||||
</div>
|
||||
<div class="chart" style="border-color: #409EFF;background: rgba(64,158,255,0.05);">
|
||||
<scEcharts ref="cpu" height="100%" :option="option.cpu"></scEcharts>
|
||||
</div>
|
||||
<div class="data">
|
||||
<el-descriptions :column="2" size="small" border title="Information">
|
||||
<el-descriptions-item label="利用率">35%</el-descriptions-item>
|
||||
<el-descriptions-item label="速度">2.67 GHz</el-descriptions-item>
|
||||
<el-descriptions-item label="内核">4</el-descriptions-item>
|
||||
<el-descriptions-item label="逻辑处理器">8</el-descriptions-item>
|
||||
<el-descriptions-item label="正常运行时间">0:06:06:04</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Memory" lazy>
|
||||
<div class="server-item-info">
|
||||
<div class="title">
|
||||
<label>Memory</label>
|
||||
<span>16.0 GB</span>
|
||||
</div>
|
||||
<div class="chart" style="border-color: #8b12ae;background: rgba(139,18,174,0.05);">
|
||||
<scEcharts ref="memory" height="100%" :option="option.memory"></scEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Disk" lazy>
|
||||
<div class="server-item-info">
|
||||
<div class="title">
|
||||
<label>Disk</label>
|
||||
<span>SAMSUNG MZVLB512HBJQ-000L7</span>
|
||||
</div>
|
||||
<div class="disk-list">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="disk-list-item">
|
||||
<h2>本地磁盘(C)</h2>
|
||||
<el-progress :stroke-width="10" :percentage="50" :color="colors" />
|
||||
<p>66.2 GB 可用，共 175 GB</p>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="disk-list-item">
|
||||
<h2>本地磁盘(D)</h2>
|
||||
<el-progress :stroke-width="10" :percentage="60" :color="colors" />
|
||||
<p>66.2 GB 可用，共 175 GB</p>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="disk-list-item">
|
||||
<h2>本地磁盘(E)</h2>
|
||||
<el-progress :stroke-width="10" :percentage="81" :color="colors" />
|
||||
<p>66.2 GB 可用，共 175 GB</p>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div class="disk-list-item">
|
||||
<h2>本地磁盘(F)</h2>
|
||||
<el-progress :stroke-width="10" :percentage="15.5" :color="colors" />
|
||||
<p>66.2 GB 可用，共 175 GB</p>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Network" lazy>
|
||||
<div class="server-item-info">
|
||||
<div class="title">
|
||||
<label>Network</label>
|
||||
<span>Intel(R) Ethernet Connection (6) 1219-V</span>
|
||||
</div>
|
||||
<div class="chart" style="border-color: #a74f01;background: rgba(167,79,1,0.05);">
|
||||
<scEcharts ref="network" height="100%" :option="option.network"></scEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="报警管理" lazy>
|
||||
<el-main>
|
||||
<el-card shadow="never" header="Event">
|
||||
<scTable ref="table" :data="event" stripe height="auto">
|
||||
<el-table-column label="#" type="index" width="50"></el-table-column>
|
||||
<el-table-column label="事件" prop="title" width="150"></el-table-column>
|
||||
<el-table-column label="等级" prop="type" width="150"></el-table-column>
|
||||
<el-table-column label="通知" prop="push" ></el-table-column>
|
||||
<el-table-column label="触发时间" prop="time" width="180"></el-table-column>
|
||||
</scTable>
|
||||
</el-card>
|
||||
<el-card shadow="never" header="Rule" style="margin-top: 15px;">
|
||||
<el-table :data="rule" stripe>
|
||||
<el-table-column label="规则名称" prop="name" width="150"></el-table-column>
|
||||
<el-table-column label="描述" prop="title" width="150"></el-table-column>
|
||||
<el-table-column label="告警类型" prop="type" width="150"></el-table-column>
|
||||
<el-table-column label="通知" prop="push" width="150"></el-table-column>
|
||||
<el-table-column></el-table-column>
|
||||
<el-table-column label="操作" width="150" align="right">
|
||||
<el-button-group>
|
||||
<el-dropdown>
|
||||
<el-button text type="primary" size="small" icon="el-icon-more"></el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>编辑</el-dropdown-item>
|
||||
<el-dropdown-item divided>删除</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-button-group>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-button type="primary" icon="el-icon-plus" style="margin-top: 20px;"></el-button>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scEcharts from '@/components/scEcharts';
|
||||
|
||||
export default {
|
||||
name: 'server',
|
||||
components: {
|
||||
scEcharts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
groupFilterText: '',
|
||||
group: [
|
||||
{
|
||||
label: "SQL Server",
|
||||
icon: "el-icon-coin",
|
||||
code: "1",
|
||||
|
||||
}, {
|
||||
label: "Web Server",
|
||||
icon: "el-icon-monitor",
|
||||
code: "2",
|
||||
}, {
|
||||
label: "Api Server",
|
||||
icon: "el-icon-monitor",
|
||||
code: "3",
|
||||
}, {
|
||||
label: "Nginx Server",
|
||||
icon: "el-icon-guide",
|
||||
code: "4",
|
||||
}
|
||||
],
|
||||
colors: [{
|
||||
color: '#409EFF',
|
||||
percentage: 60
|
||||
},
|
||||
{
|
||||
color: '#E6A23C',
|
||||
percentage: 80
|
||||
},
|
||||
{
|
||||
color: '#F56C6C',
|
||||
percentage: 100
|
||||
}
|
||||
],
|
||||
event: [
|
||||
{
|
||||
title: 'Disk 大于 90%',
|
||||
type: '告警事件',
|
||||
push: '短信',
|
||||
time: '2021-10-09 21:25:19'
|
||||
},
|
||||
{
|
||||
title: 'Disk 大于 90%',
|
||||
type: '致命事件',
|
||||
push: '短信',
|
||||
time: '2021-10-09 21:25:19'
|
||||
}
|
||||
],
|
||||
rule: [
|
||||
{
|
||||
name: 'test_cpu',
|
||||
title: '测试CPU报警',
|
||||
type: 'CPU',
|
||||
push: '短信'
|
||||
},
|
||||
{
|
||||
name: 'test_cpu',
|
||||
title: '测试CPU报警',
|
||||
type: 'CPU',
|
||||
push: '短信'
|
||||
}
|
||||
],
|
||||
option: {
|
||||
cpu: {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
top: '0',
|
||||
bottom: '0',
|
||||
left: '0',
|
||||
right: '0'
|
||||
},
|
||||
animation: false,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: (function() {
|
||||
var now = new Date();
|
||||
var res = [];
|
||||
var len = 60;
|
||||
while (len--) {
|
||||
res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
|
||||
now = new Date(now - 2000);
|
||||
}
|
||||
return res;
|
||||
})(),
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
data: (function() {
|
||||
var res = [];
|
||||
var len = 60;
|
||||
while (len--) {
|
||||
res.push(Math.round(Math.random() * 0));
|
||||
}
|
||||
return res;
|
||||
})(),
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#409EFF'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1,
|
||||
color: '#409EFF'
|
||||
},
|
||||
}]
|
||||
},
|
||||
memory: {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
top: '0',
|
||||
bottom: '0',
|
||||
left: '0',
|
||||
right: '0'
|
||||
},
|
||||
animation: false,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: (function() {
|
||||
var now = new Date();
|
||||
var res = [];
|
||||
var len = 60;
|
||||
while (len--) {
|
||||
res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
|
||||
now = new Date(now - 2000);
|
||||
}
|
||||
return res;
|
||||
})(),
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
data: (function() {
|
||||
var res = [];
|
||||
var len = 60;
|
||||
while (len--) {
|
||||
res.push(Math.round(Math.random() * 0));
|
||||
}
|
||||
return res;
|
||||
})(),
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#8b12ae'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1,
|
||||
color: '#8b12ae'
|
||||
},
|
||||
}]
|
||||
},
|
||||
network: {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
top: '0',
|
||||
bottom: '0',
|
||||
left: '0',
|
||||
right: '0'
|
||||
},
|
||||
animation: false,
|
||||
legend: {
|
||||
data: ['接收 Kbps', '发送 Kbps'],
|
||||
top: '10px',
|
||||
right: '10px',
|
||||
itemStyle: {
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: (function() {
|
||||
var now = new Date();
|
||||
var res = [];
|
||||
var len = 60;
|
||||
while (len--) {
|
||||
res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
|
||||
now = new Date(now - 2000);
|
||||
}
|
||||
return res;
|
||||
})(),
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: '接收 Kbps',
|
||||
data: (function() {
|
||||
var res = [];
|
||||
var len = 60;
|
||||
while (len--) {
|
||||
res.push(Math.round(Math.random() * 0));
|
||||
}
|
||||
return res;
|
||||
})(),
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#a74f01'
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.1,
|
||||
color: '#a74f01'
|
||||
},
|
||||
}, {
|
||||
name: '发送 Kbps',
|
||||
data: (function() {
|
||||
var res = [];
|
||||
var len = 60;
|
||||
while (len--) {
|
||||
res.push(Math.round(Math.random() * 0));
|
||||
}
|
||||
return res;
|
||||
})(),
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: 'dashed',
|
||||
color: '#a74f01'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
groupFilterText(val) {
|
||||
this.$refs.group.filter(val);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setInterval(() => {
|
||||
this.option.cpu.series[0].data.shift()
|
||||
this.option.cpu.series[0].data.push(Math.round(Math.random() * 100));
|
||||
this.option.cpu.xAxis.data.shift();
|
||||
this.option.cpu.xAxis.data.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
|
||||
|
||||
this.option.memory.series[0].data.shift()
|
||||
this.option.memory.series[0].data.push(Math.round(Math.random() * 50));
|
||||
this.option.memory.xAxis.data.shift();
|
||||
this.option.memory.xAxis.data.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
|
||||
|
||||
this.option.network.series[0].data.shift()
|
||||
this.option.network.series[0].data.push(Math.round(Math.random() * 20));
|
||||
this.option.network.series[1].data.shift()
|
||||
this.option.network.series[1].data.push(Math.round(Math.random() * 10));
|
||||
this.option.network.xAxis.data.shift();
|
||||
this.option.network.xAxis.data.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
|
||||
}, 1000)
|
||||
},
|
||||
methods: {
|
||||
//树过滤
|
||||
groupFilterNode(value, data){
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
},
|
||||
tabClick(tab) {
|
||||
this.$nextTick(() => {
|
||||
if(tab.props.label == 'CPU' && this.$refs.cpu.myChart){
|
||||
this.$refs.cpu.myChart.resize()
|
||||
}
|
||||
if(tab.props.label == 'Memory' && this.$refs.memory.myChart){
|
||||
this.$refs.memory.myChart.resize()
|
||||
}
|
||||
if(tab.props.label == 'Network' && this.$refs.network.myChart){
|
||||
this.$refs.network.myChart.resize()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tabs-pages {display: flex;flex-flow: column;flex-shrink: 0;height: 100%;}
|
||||
.tabs-pages > .el-tabs__header {background: #fff;margin: 0;}
|
||||
.tabs-pages > .el-tabs__header .el-tabs__nav-wrap {display: flex;justify-content:center;}
|
||||
.tabs-pages > .el-tabs__header .el-tabs__item {height:60px;line-height: 60px;font-size: 14px;}
|
||||
.tabs-pages > .el-tabs__content {overflow-x: hidden;overflow: auto;}
|
||||
.dark .tabs-pages > .el-tabs__header {background: var(--el-bg-color-overlay);}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.server-top-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.server-top-item .percentage-value {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.server-top-item .percentage-value em {
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
margin-left: 5px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.server-top-item .percentage-label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.server-item-info {}
|
||||
|
||||
.server-item-info .title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.server-item-info .title label {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.server-item-info .title span {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.server-item-info .chart {
|
||||
height: 250px;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.server-item-info .data {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.disk-list-item {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.disk-list-item h2 {
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.disk-list-item .el-progress {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.disk-list-item p {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,124 +0,0 @@
|
|||
<template>
|
||||
<el-container>
|
||||
|
||||
<el-main class="nopadding map-main" v-loading="mapLoading">
|
||||
<scEcharts ref="map" :option="option"></scEcharts>
|
||||
</el-main>
|
||||
<el-aside width="340px" class="map-aside">
|
||||
<el-descriptions title="Shanghai China" :column="1" border>
|
||||
<el-descriptions-item label="region">Shanghai</el-descriptions-item>
|
||||
<el-descriptions-item label="area">6340.5 km2</el-descriptions-item>
|
||||
<el-descriptions-item label="state"><sc-status-indicator pulse type="primary"></sc-status-indicator></el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-collapse style="margin-top: 15px;">
|
||||
<el-collapse-item title="video monitor" name="1">
|
||||
<div class="screen" style="background: #000;height:180px;color: #999;text-align: center;">
|
||||
<el-icon style="font-size: 40px;margin-top: 50px;"><el-icon-video-play /></el-icon>
|
||||
<p>camera</p>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<el-alert title="地图数据来自阿里项目 DATAV.GeoAtlas" type="info" style="margin-top: 15px;"></el-alert>
|
||||
</el-aside>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scEcharts from '@/components/scEcharts';
|
||||
|
||||
export default {
|
||||
name: 'svgmap',
|
||||
components: {
|
||||
scEcharts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mapLoading: false,
|
||||
option: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getSvg()
|
||||
},
|
||||
methods: {
|
||||
async getSvg(){
|
||||
this.mapLoading = true;
|
||||
var map = await this.$HTTP.get('img/shanghai.json')
|
||||
this.mapLoading = false;
|
||||
scEcharts.registerMap('shanghai', map);
|
||||
|
||||
this.option = {
|
||||
title: {
|
||||
text: 'Map Demo',
|
||||
subtext: '可用于展示GeoJson/SVG的地图或者其它图形',
|
||||
left: '20',
|
||||
top: '20'
|
||||
},
|
||||
tooltip: {
|
||||
},
|
||||
geo: {
|
||||
map: 'shanghai',
|
||||
zoom: 1,
|
||||
roam: true,
|
||||
selectedMode: 'single',
|
||||
itemStyle: {
|
||||
areaColor: 'rgba(128, 128, 128, 0.1)',
|
||||
borderColor: 'rgba(0, 0, 0, 0.2)',
|
||||
borderWidth: 1
|
||||
},
|
||||
select: {
|
||||
itemStyle: {
|
||||
color: 'rgba(0, 153, 255, 0.8)'
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
color: null
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
series: {
|
||||
name: '告警',
|
||||
type: 'effectScatter',
|
||||
symbolSize: 20,
|
||||
coordinateSystem: 'geo',
|
||||
geoIndex: 0,
|
||||
encode: {
|
||||
tooltip: 2
|
||||
},
|
||||
data: [
|
||||
[121.3154759073276, 30.819428360452587]
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
var myChart = this.$refs.map.myChart
|
||||
myChart.on('geoselectchanged', function (params) {
|
||||
var selectedNames = params.allSelected[0].name;
|
||||
console.log('selected', selectedNames);
|
||||
});
|
||||
myChart.getZr().on('click', function (params) {
|
||||
var pixelPoint = [params.offsetX, params.offsetY];
|
||||
var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);
|
||||
// 在 SVG 上点击时，坐标会被打印。
|
||||
// 这些坐标可以在 `series.data` 里使用。
|
||||
console.log(dataPoint);
|
||||
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-main {background: #f6f8f9;}
|
||||
.map-aside {border-left: 1px solid #e6e6e6;border-right: 0;padding:15px;}
|
||||
|
||||
html.dark .map-main {background: var(--el-bg-color);}
|
||||
</style>
|
||||
|
|
@ -1,214 +0,0 @@
|
|||
<!--
|
||||
* @Descripttion: 分栏明细模板
|
||||
* @version: 1.0
|
||||
* @Author: sakuya
|
||||
* @Date: 2021年7月26日08:59:14
|
||||
* @LastEditors:
|
||||
* @LastEditTime:
|
||||
-->
|
||||
|
||||
<template>
|
||||
<el-container>
|
||||
<el-main ref="printMain">
|
||||
<div class="innerPage">
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="8">
|
||||
<el-card shadow="never" class="top-state">
|
||||
<h2>OID<b>2000832</b><span>复制</span></h2>
|
||||
<p>当前状态：物流配送中</p>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :lg="16">
|
||||
<el-card shadow="never">
|
||||
<el-row :gutter="15">
|
||||
<el-col :lg="8">
|
||||
<sc-statistic title="订单量" value="6400" suffix="Kg" groupSeparator></sc-statistic>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<sc-statistic title="发货量" value="1568.873" suffix="Kg" groupSeparator></sc-statistic>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<sc-statistic title="订单金额" value="1920000" prefix="¥" groupSeparator></sc-statistic>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-card shadow="never" header="进程">
|
||||
<el-steps :active="2" finish-status="success">
|
||||
<el-step title="创建" description="创建人 Sakuya"></el-step>
|
||||
<el-step title="分配" description="承运商 SCUI logistics"></el-step>
|
||||
<el-step title="配送" description="3 条物流记录"></el-step>
|
||||
<el-step title="完成"></el-step>
|
||||
</el-steps>
|
||||
</el-card>
|
||||
<el-card shadow="never" style="margin-top: 15px;">
|
||||
<el-tabs>
|
||||
<el-tab-pane label="基础信息">
|
||||
<el-descriptions :column="3" border size="small">
|
||||
<el-descriptions-item label="订单号">2000832</el-descriptions-item>
|
||||
<el-descriptions-item label="创建人">sakuya</el-descriptions-item>
|
||||
<el-descriptions-item label="创建时间">2021-07-21 13:10:00</el-descriptions-item>
|
||||
<el-descriptions-item label="客户编号">0000017</el-descriptions-item>
|
||||
<el-descriptions-item label="客户名称">上海红谷物流有限公司</el-descriptions-item>
|
||||
<el-descriptions-item label="客户评级">
|
||||
<el-rate v-model="rate" disabled>
|
||||
</el-rate>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="物流记录" lazy>
|
||||
<scTable ref="table" :data="list" stripe hideDo>
|
||||
<el-table-column label="ID" prop="id" width="80" sortable></el-table-column>
|
||||
<el-table-column label="载具" prop="vehicle" width="120"></el-table-column>
|
||||
<el-table-column label="驾驶员" prop="driver" width="120"></el-table-column>
|
||||
<el-table-column label="状态" prop="state" width="120"></el-table-column>
|
||||
<el-table-column label="载量" prop="quantity" width="120" sortable></el-table-column>
|
||||
</scTable>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="操作日志" lazy>
|
||||
<el-timeline style="padding:15px;">
|
||||
<el-timeline-item v-for="(item, index) in logs" :key="index" :timestamp="item.timestamp">
|
||||
{{item.content}}
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-main>
|
||||
<el-aside width="300px" style="border-left: 1px solid #e6e6e6;border-right: 0;padding:15px;">
|
||||
<div class="side-item">
|
||||
<div class="header">操作</div>
|
||||
<div class="content">
|
||||
<el-button type="primary" size="small" @click="print">打印</el-button>
|
||||
<el-button size="small">次要操作</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="side-item">
|
||||
<div class="header">状态</div>
|
||||
<div class="content">
|
||||
<p>进行中</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="side-item">
|
||||
<div class="header">标记</div>
|
||||
<div class="content">
|
||||
<el-tag>重要</el-tag>
|
||||
<el-tag type="danger">紧急</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="side-item">
|
||||
<div class="header">指数</div>
|
||||
<div class="content">
|
||||
<scEcharts height="200px" :option="radarsOption"></scEcharts>
|
||||
</div>
|
||||
</div>
|
||||
</el-aside>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scStatistic from '@/components/scStatistic'
|
||||
import scEcharts from '@/components/scEcharts'
|
||||
import print from '@/utils/print'
|
||||
|
||||
export default {
|
||||
name: 'tabinfo',
|
||||
components: {
|
||||
scStatistic,
|
||||
scEcharts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rate: 3.7,
|
||||
logs: [
|
||||
{
|
||||
content: 'sakuya 创建了物流记录 1',
|
||||
timestamp: '2018-04-17'
|
||||
},
|
||||
{
|
||||
content: 'sakuya 维护了客户信息',
|
||||
timestamp: '2018-04-15'
|
||||
},
|
||||
{
|
||||
content: 'sakuya 创建订单',
|
||||
timestamp: '2018-04-15'
|
||||
}
|
||||
],
|
||||
list: [
|
||||
{
|
||||
id: 1,
|
||||
vehicle: '沪A88808',
|
||||
driver: '刘翔',
|
||||
state: '0',
|
||||
quantity: '29.654'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
vehicle: '沪A88808',
|
||||
driver: '刘翔',
|
||||
state: '0',
|
||||
quantity: '28.850'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
vehicle: '沪A3B88D',
|
||||
driver: '刘翔',
|
||||
state: '0',
|
||||
quantity: '28.159'
|
||||
}
|
||||
],
|
||||
radarsOption: {
|
||||
radar: {
|
||||
radius: 60,
|
||||
center: ['50%', '50%'],
|
||||
indicator: [
|
||||
{ name: '人员', max: 100},
|
||||
{ name: '设备', max: 100},
|
||||
{ name: '产品', max: 100},
|
||||
{ name: '服务', max: 100},
|
||||
{ name: '耗时', max: 100}
|
||||
]
|
||||
},
|
||||
series: [{
|
||||
name: "SCUI",
|
||||
type: 'radar',
|
||||
areaStyle: {},
|
||||
data: [
|
||||
{
|
||||
value: [50, 28, 89, 70, 10],
|
||||
}
|
||||
]
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
print(){
|
||||
print(this.$refs.printMain)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.innerPage {width: 1000px;margin:0 auto;}
|
||||
.top-state {background: #409EFF;color: #fff;}
|
||||
.top-state h2 {font-size: 17px;font-weight: normal;}
|
||||
.top-state h2 b {margin-left: 10px;}
|
||||
.top-state h2 span {font-size: 12px;margin-left: 15px;}
|
||||
.top-state p {opacity: 0.8;margin-top: 15px;}
|
||||
|
||||
.side-item {border-bottom: 1px solid #eee;margin-bottom: 30px;}
|
||||
.side-item .header {font-size: 14px;margin-bottom: 15px;font-weight: bold;}
|
||||
.side-item .content {padding-bottom:15px;}
|
||||
|
||||
@media (max-width: 1610px){
|
||||
.innerPage {width: 100%;}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe>
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="姓名" prop="name" width="150"></el-table-column>
|
||||
<el-table-column label="性别" prop="sex" width="150" :filters="sexFilters" :filter-method="filterHandler">
|
||||
<template #default="scope">
|
||||
<el-tag v-if="scope.row.sex=='男'">{{scope.row.sex}}</el-tag>
|
||||
<el-tag v-if="scope.row.sex=='女'" type="success">{{scope.row.sex}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="邮箱" prop="email" width="250"></el-table-column>
|
||||
<el-table-column label="评分" prop="num" width="150" sortable></el-table-column>
|
||||
<el-table-column label="进度" prop="progress" width="250" sortable>
|
||||
<template #default="scope">
|
||||
<el-progress :percentage="scope.row.progress" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="注册时间" prop="datetime" width="150" sortable></el-table-column>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tableBase',
|
||||
data() {
|
||||
return {
|
||||
sexFilters: [
|
||||
{text: '男', value: '男'},
|
||||
{text: '女', value: '女'}
|
||||
],
|
||||
list: {
|
||||
apiObj: this.$API.demo.list
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
filterHandler(value, row, column){
|
||||
const property = column['property']
|
||||
return row[property] === value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<el-alert title="请在右下角第二个按钮体验自定义列" type="warning" :closable="false"/>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" tableName="listCustomColumn" :apiObj="list.apiObj" :column="list.column" row-key="id" stripe>
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<template #progress="scope">
|
||||
<el-progress :percentage="scope.row.progress" />
|
||||
</template>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tableCustomColumn',
|
||||
data() {
|
||||
return {
|
||||
list: {
|
||||
apiObj: this.$API.demo.list,
|
||||
column: [
|
||||
{
|
||||
label: "姓名",
|
||||
prop: "name",
|
||||
width: "150"
|
||||
},
|
||||
{
|
||||
label: "性别",
|
||||
prop: "sex",
|
||||
width: "150",
|
||||
filters: [{text: '男', value: '男'}, {text: '女', value: '女'}]
|
||||
},
|
||||
{
|
||||
label: "邮箱",
|
||||
prop: "email",
|
||||
width: "250",
|
||||
hide: true
|
||||
},
|
||||
{
|
||||
label: "评分",
|
||||
prop: "num",
|
||||
width: "150",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: "进度",
|
||||
prop: "progress",
|
||||
width: "250",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
label: "注册时间",
|
||||
prop: "datetime",
|
||||
width: "150",
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<el-alert title="因演示使用mock数据,所以视图上看不出效果,可以查看控制台的网络请求" type="warning" :closable="false"/>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe show-summary remoteSort remoteFilter remoteSummary>
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="姓名" prop="name" width="150"></el-table-column>
|
||||
<el-table-column label="性别" prop="sex" width="150" column-key="sex" :filters="sexFilters"></el-table-column>
|
||||
<el-table-column label="邮箱" prop="email" width="250"></el-table-column>
|
||||
<el-table-column label="评分" prop="num" width="150" sortable='custom'></el-table-column>
|
||||
<el-table-column label="进度" prop="progress" width="250" sortable></el-table-column>
|
||||
<el-table-column label="注册时间" prop="datetime" width="150" sortable='custom'></el-table-column>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tableRemote',
|
||||
data() {
|
||||
return {
|
||||
sexFilters: [
|
||||
{text: '男', value: '男'},
|
||||
{text: '女', value: '女'}
|
||||
],
|
||||
list: {
|
||||
apiObj: this.$API.demo.list
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
||||
<el-button type="danger" plain icon="el-icon-delete"></el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe>
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="个人信息">
|
||||
<el-table-column label="姓名" prop="name" width="150"></el-table-column>
|
||||
<el-table-column label="性别" prop="sex" width="150"></el-table-column>
|
||||
<el-table-column label="邮箱" prop="email" width="250"></el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="评分" prop="num" width="150"></el-table-column>
|
||||
<el-table-column label="注册时间" prop="datetime" width="150"></el-table-column>
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'tableThead',
|
||||
data() {
|
||||
return {
|
||||
list: {
|
||||
apiObj: this.$API.demo.list
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
Loading…
Reference in New Issue