update 优化
This commit is contained in:
yoe
parent
ba4c075553
commit
dea0d7bd05
@ -4,10 +4,9 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta base="/management/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>数字化管理系统</title>
|
||||
<script src="./static/js/echarts.min.js"></script>
|
||||
<script src="https://f.ldxinyong.com/h5/echarts.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@ -34,11 +34,6 @@ const mainRoutes = {
|
||||
// 2. iframeUrl: 是否通过iframe嵌套展示内容, '以http[s]://开头': 是, '': 否
|
||||
// 提示: 如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!
|
||||
{ path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页' } },
|
||||
// { path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题' } },
|
||||
// { path: '/staff-manage', component: _import('business/staff/staff-manage/index'), name: 'staff-manage', meta: { title: '员工管理', isTab: true, isNoCard: true } },
|
||||
// { path: '/staff-profile', component: _import('business/staff/staff-profile/index'), name: 'staff-profile', meta: { title: '员工概述', isTab: true, isNoCard: true } },
|
||||
// { path: '/staff-archives', component: _import('business/staff/staff-archives/index'), name: 'staff-archives', meta: { title: '员工档案', isTab: true, isNoCard: true } }
|
||||
// { path: '/sys/user/index', component: _import('modules/sys/user/index'), name: 'staff-archives1', meta: { title: '员工档案', isTab: true, isNoCard: true } }
|
||||
{ path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题' } }
|
||||
],
|
||||
beforeEnter (to, from, next) {
|
||||
|
||||
@ -1,263 +0,0 @@
|
||||
<template>
|
||||
<div class="staff">
|
||||
<el-row>
|
||||
<el-col class="menu" :span="6">
|
||||
<el-menu
|
||||
@open="openMenu"
|
||||
:default-active="current"
|
||||
:collapse-transition="true"
|
||||
:unique-opened="true"
|
||||
>
|
||||
<menu-tree v-for="(item) in menuList" :key="item.id" :menu="item"></menu-tree>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div class="block">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="员工姓名">
|
||||
<el-input v-model="searchParams.staffName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="人员状态">
|
||||
<el-select v-model="searchParams.staffState" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in staffStateList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getTable()">查询</el-button>
|
||||
<el-button @click="clear()">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
:header-cell-style="{'color': '#909399', 'background-color': '#f5f7fa'}"
|
||||
style="width: 100%"
|
||||
height="100%"
|
||||
>
|
||||
<el-table-column header-align="center" align="center" label="工号" prop="jobnumber"></el-table-column>
|
||||
<el-table-column header-align="center" align="center" label="员工姓名" prop="name"></el-table-column>
|
||||
<el-table-column header-align="center" align="center" label="职位" prop="position"></el-table-column>
|
||||
<el-table-column header-align="center" align="center" label="状态" prop="deptName"></el-table-column>
|
||||
<el-table-column header-align="center" align="center" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleView(scope.row)">查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="bl-form3"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page.sync="currentPage"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="pageTotal"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import menuTree from '@/components/menu-tree'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
menuTree
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
menuList: [], // 架构数据
|
||||
tableData: [], // 表格数据
|
||||
// 搜索数据
|
||||
searchParams: {
|
||||
staffName: '',
|
||||
staffState: ''
|
||||
},
|
||||
// 在职状态
|
||||
staffStateList: [
|
||||
{ value: '0', label: '在职' },
|
||||
{ value: '1', label: '离职' }
|
||||
],
|
||||
loading: false,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
pageTotal: 0,
|
||||
deptId: '',
|
||||
// 弹窗相关
|
||||
showAddDialogForm: false,
|
||||
activeName: 'first',
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route: function (val) {
|
||||
if (val.name === 'staff') {
|
||||
this.clearData()
|
||||
this.handleGetTableList(val.query.id)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
current () {
|
||||
return this.$route.query.hasOwnProperty('id') ? this.$route.query.id ? this.$route.query.id.toString() : '' : ''
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.handleGetMenuList()
|
||||
this.handleGetTableList(this.current)
|
||||
},
|
||||
methods: {
|
||||
// 获取侧边架构列表
|
||||
handleGetMenuList () {
|
||||
let data = [{
|
||||
'children': [
|
||||
{
|
||||
'children': [],
|
||||
'id': 70990627,
|
||||
'name': '结算部',
|
||||
'parentId': 55969991,
|
||||
'number': '1'
|
||||
}
|
||||
],
|
||||
'id': 55969991,
|
||||
'name': '结算中心',
|
||||
'parentId': 1,
|
||||
'number': 2
|
||||
}, {
|
||||
'children': [
|
||||
{
|
||||
'children': [
|
||||
{
|
||||
'children': [],
|
||||
'id': 92131240,
|
||||
'name': '金融运营团队',
|
||||
'parentId': 87839336
|
||||
},
|
||||
{
|
||||
'children': [
|
||||
{
|
||||
'children': [],
|
||||
'id': 9213124111,
|
||||
'name': '2B业务组',
|
||||
'parentId': 92131239
|
||||
},
|
||||
{
|
||||
'children': [],
|
||||
'id': 9213124222,
|
||||
'name': '2C业务组',
|
||||
'parentId': 92131239
|
||||
}
|
||||
],
|
||||
'id': 92131239,
|
||||
'name': '电商运营团队',
|
||||
'parentId': 87839336
|
||||
}
|
||||
],
|
||||
'id': 87839336,
|
||||
'name': '运营中心',
|
||||
'parentId': 87839327
|
||||
}
|
||||
],
|
||||
'id': 87839327,
|
||||
'name': '业务前台',
|
||||
'parentId': 1
|
||||
}]
|
||||
this.menuList = data
|
||||
},
|
||||
// 获取数据列表
|
||||
handleGetTableList (id) {
|
||||
this.tableData = [{
|
||||
'deptName': '结算中心',
|
||||
'id': 665,
|
||||
'jobnumber': '4',
|
||||
'name': '刘更顺',
|
||||
'position': 'CPO'
|
||||
},
|
||||
{
|
||||
'deptName': '结算部',
|
||||
'id': 670,
|
||||
'jobnumber': '239',
|
||||
'name': '王文龙',
|
||||
'position': '数据运营'
|
||||
}]
|
||||
this.loading = false
|
||||
},
|
||||
openMenu (index, indexPath) {
|
||||
if (index === '51685041') {
|
||||
this.handleGetTableList(index)
|
||||
} else {
|
||||
this.clearData()
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
clear () {
|
||||
this.input = ''
|
||||
this.deptId = ''
|
||||
this.$router.push({ name: 'staff', query: { id: '' } })
|
||||
},
|
||||
clearData () {
|
||||
this.tableData = []
|
||||
this.currentPage = 1
|
||||
this.pageTotal = 10
|
||||
this.loading = true
|
||||
},
|
||||
handleCurrentChange (val) {
|
||||
this.handleGetTableList()
|
||||
},
|
||||
handleSizeChange (val) {
|
||||
this.pageSize = val
|
||||
this.handleGetTableList()
|
||||
},
|
||||
// 弹窗相关
|
||||
handleClick (tab, event) {
|
||||
console.log(tab, event)
|
||||
},
|
||||
handleView () {
|
||||
this.showAddDialogForm = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.staff .block,
|
||||
.staff .table {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.el-form-item .el-form-item {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.add-wrap {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.turn-work-list {
|
||||
background-color: pink;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.bl-form3 {
|
||||
&.el-pagination {
|
||||
margin-top: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,23 +0,0 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div>左边</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () { },
|
||||
mounted () { },
|
||||
methods: {},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='' scoped>
|
||||
</style>
|
||||
@ -1,171 +0,0 @@
|
||||
<template>
|
||||
<div class="staff-manage-right">
|
||||
<div class="el-card__body">
|
||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="handleGetTableList()">
|
||||
<el-form-item>
|
||||
<el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleGetTableList()">查询</el-button>
|
||||
<el-button v-if="isAuth('sys:user:save')" type="primary" @click="handleAddOrUpdate()">新增</el-button>
|
||||
<el-button
|
||||
v-if="isAuth('sys:user:delete')"
|
||||
type="danger"
|
||||
@click="handleDelete()"
|
||||
:disabled="dataListSelections.length <= 0"
|
||||
>批量删除</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="el-card__body">
|
||||
<el-table
|
||||
:data="dataList"
|
||||
border
|
||||
v-loading="dataListLoading"
|
||||
@selection-change="handleChangeSelection"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
|
||||
<el-table-column prop="userId" header-align="center" align="center" width="80" label="ID"></el-table-column>
|
||||
<el-table-column prop="username" header-align="center" align="center" label="用户名"></el-table-column>
|
||||
<el-table-column prop="email" header-align="center" align="center" label="邮箱"></el-table-column>
|
||||
<el-table-column prop="mobile" header-align="center" align="center" label="手机号"></el-table-column>
|
||||
<el-table-column prop="status" header-align="center" align="center" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.status === 0" size="small" type="danger">禁用</el-tag>
|
||||
<el-tag v-else size="small">正常</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="180"
|
||||
label="创建时间"
|
||||
></el-table-column>
|
||||
<el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="isAuth('sys:user:update')"
|
||||
type="text"
|
||||
size="small"
|
||||
@click="handleAddOrUpdate(scope.row.userId)"
|
||||
>修改</el-button>
|
||||
<el-button
|
||||
v-if="isAuth('sys:user:delete')"
|
||||
type="text"
|
||||
size="small"
|
||||
@click="handleDelete(scope.row.userId)"
|
||||
>删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="handleChangeSize"
|
||||
@current-change="handleChangeCurrent"
|
||||
:current-page="pageIndex"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
:total="totalPage"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { apiSysUserList } from '@/api/api_sys'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
dataForm: {
|
||||
userName: ''
|
||||
},
|
||||
dataList: [],
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
totalPage: 0,
|
||||
dataListLoading: false,
|
||||
dataListSelections: [],
|
||||
addOrUpdateVisible: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
},
|
||||
activated () {
|
||||
this.handleGetTableList()
|
||||
},
|
||||
methods: {
|
||||
// 获取数据列表
|
||||
handleGetTableList () {
|
||||
// apiSysUserList({
|
||||
// 'page': this.pageIndex,
|
||||
// 'limit': this.pageSize,
|
||||
// 'username': this.dataForm.userName
|
||||
// }).then(res => {
|
||||
// if (res && res.code === 0) {
|
||||
// this.dataList = res.page.list
|
||||
// this.totalPage = res.page.totalCount
|
||||
// } else {
|
||||
// this.dataList = []
|
||||
// this.totalPage = 0
|
||||
// }
|
||||
// this.dataListLoading = false
|
||||
// })
|
||||
},
|
||||
// 每页数
|
||||
handleChangeSize (val) {
|
||||
this.pageSize = val
|
||||
this.pageIndex = 1
|
||||
this.handleGetTableList()
|
||||
},
|
||||
// 当前页
|
||||
handleChangeCurrent (val) {
|
||||
this.pageIndex = val
|
||||
this.handleGetTableList()
|
||||
},
|
||||
// 多选
|
||||
handleChangeSelection (val) {
|
||||
this.dataListSelections = val
|
||||
},
|
||||
// 新增 / 修改
|
||||
handleAddOrUpdate (id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
handleDelete (id) {
|
||||
var userIds = id ? [id] : this.dataListSelections.map(item => {
|
||||
return item.userId
|
||||
})
|
||||
this.$confirm(`确定对[id=${userIds.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$http({
|
||||
url: this.$http.adornUrl('/sys/user/delete'),
|
||||
method: 'post',
|
||||
data: this.$http.adornData(userIds, false)
|
||||
}).then(({ data }) => {
|
||||
if (data && data.code === 0) {
|
||||
this.$message({
|
||||
message: '操作成功',
|
||||
type: 'success',
|
||||
duration: 1500,
|
||||
onClose: () => {
|
||||
this.handleGetTableList()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.error(data.msg)
|
||||
}
|
||||
})
|
||||
}).catch(() => { })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,37 +0,0 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="staff-manage">
|
||||
<staff-manage-left />
|
||||
<staff-manage-right />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import staffManageLeft from './compoments/staff-manage-left'
|
||||
import staffManageRight from './compoments/staff-manage-right'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
components: {
|
||||
staffManageLeft,
|
||||
staffManageRight
|
||||
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () { },
|
||||
mounted () { },
|
||||
methods: {},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.staff-manage {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
@ -1,265 +0,0 @@
|
||||
<template>
|
||||
<div class="staff">
|
||||
<el-card>
|
||||
<el-row>
|
||||
<el-col class="menu" :span="6">
|
||||
<el-menu
|
||||
@open="openMenu"
|
||||
:default-active="current"
|
||||
:collapse-transition="true"
|
||||
:unique-opened="true"
|
||||
>
|
||||
<menu-tree v-for="(item) in menuList" :key="item.id" :menu="item"></menu-tree>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div class="block">
|
||||
<el-form :inline="true">
|
||||
<el-form-item label="员工姓名">
|
||||
<el-input v-model="searchParams.staffName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="人员状态">
|
||||
<el-select v-model="searchParams.staffState" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in staffStateList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getTable()">查询</el-button>
|
||||
<el-button @click="clear()">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="table">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
:header-cell-style="{'color': '#909399', 'background-color': '#f5f7fa'}"
|
||||
style="width: 100%"
|
||||
height="100%"
|
||||
>
|
||||
<el-table-column header-align="center" align="center" label="工号" prop="jobnumber"></el-table-column>
|
||||
<el-table-column header-align="center" align="center" label="员工姓名" prop="name"></el-table-column>
|
||||
<el-table-column header-align="center" align="center" label="职位" prop="position"></el-table-column>
|
||||
<el-table-column header-align="center" align="center" label="状态" prop="deptName"></el-table-column>
|
||||
<el-table-column header-align="center" align="center" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" @click="handleView(scope.row)">查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="bl-form3"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page.sync="currentPage"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:total="pageTotal"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import menuTree from '@/components/menu-tree'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
menuTree
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
menuList: [], // 架构数据
|
||||
tableData: [], // 表格数据
|
||||
// 搜索数据
|
||||
searchParams: {
|
||||
staffName: '',
|
||||
staffState: ''
|
||||
},
|
||||
// 在职状态
|
||||
staffStateList: [
|
||||
{ value: '0', label: '在职' },
|
||||
{ value: '1', label: '离职' }
|
||||
],
|
||||
loading: false,
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
pageTotal: 0,
|
||||
deptId: '',
|
||||
// 弹窗相关
|
||||
showAddDialogForm: false,
|
||||
activeName: 'first',
|
||||
form: {
|
||||
name: '',
|
||||
region: '',
|
||||
date1: '',
|
||||
date2: '',
|
||||
delivery: false,
|
||||
type: [],
|
||||
resource: '',
|
||||
desc: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route: function (val) {
|
||||
if (val.name === 'staff') {
|
||||
this.clearData()
|
||||
this.handleGetTableList(val.query.id)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
current () {
|
||||
return this.$route.query.hasOwnProperty('id') ? this.$route.query.id ? this.$route.query.id.toString() : '' : ''
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.handleGetMenuList()
|
||||
this.handleGetTableList(this.current)
|
||||
},
|
||||
methods: {
|
||||
// 获取侧边架构列表
|
||||
handleGetMenuList () {
|
||||
let data = [{
|
||||
'children': [
|
||||
{
|
||||
'children': [],
|
||||
'id': 70990627,
|
||||
'name': '结算部',
|
||||
'parentId': 55969991,
|
||||
'number': '1'
|
||||
}
|
||||
],
|
||||
'id': 55969991,
|
||||
'name': '结算中心',
|
||||
'parentId': 1,
|
||||
'number': 2
|
||||
}, {
|
||||
'children': [
|
||||
{
|
||||
'children': [
|
||||
{
|
||||
'children': [],
|
||||
'id': 92131240,
|
||||
'name': '金融运营团队',
|
||||
'parentId': 87839336
|
||||
},
|
||||
{
|
||||
'children': [
|
||||
{
|
||||
'children': [],
|
||||
'id': 9213124111,
|
||||
'name': '2B业务组',
|
||||
'parentId': 92131239
|
||||
},
|
||||
{
|
||||
'children': [],
|
||||
'id': 9213124222,
|
||||
'name': '2C业务组',
|
||||
'parentId': 92131239
|
||||
}
|
||||
],
|
||||
'id': 92131239,
|
||||
'name': '电商运营团队',
|
||||
'parentId': 87839336
|
||||
}
|
||||
],
|
||||
'id': 87839336,
|
||||
'name': '运营中心',
|
||||
'parentId': 87839327
|
||||
}
|
||||
],
|
||||
'id': 87839327,
|
||||
'name': '业务前台',
|
||||
'parentId': 1
|
||||
}]
|
||||
this.menuList = data
|
||||
},
|
||||
// 获取数据列表
|
||||
handleGetTableList (id) {
|
||||
this.tableData = [{
|
||||
'deptName': '结算中心',
|
||||
'id': 665,
|
||||
'jobnumber': '4',
|
||||
'name': '刘更顺',
|
||||
'position': 'CPO'
|
||||
},
|
||||
{
|
||||
'deptName': '结算部',
|
||||
'id': 670,
|
||||
'jobnumber': '239',
|
||||
'name': '王文龙',
|
||||
'position': '数据运营'
|
||||
}]
|
||||
this.loading = false
|
||||
},
|
||||
openMenu (index, indexPath) {
|
||||
if (index === '51685041') {
|
||||
this.handleGetTableList(index)
|
||||
} else {
|
||||
this.clearData()
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
clear () {
|
||||
this.input = ''
|
||||
this.deptId = ''
|
||||
this.$router.push({ name: 'staff', query: { id: '' } })
|
||||
},
|
||||
clearData () {
|
||||
this.tableData = []
|
||||
this.currentPage = 1
|
||||
this.pageTotal = 10
|
||||
this.loading = true
|
||||
},
|
||||
handleCurrentChange (val) {
|
||||
this.handleGetTableList()
|
||||
},
|
||||
handleSizeChange (val) {
|
||||
this.pageSize = val
|
||||
this.handleGetTableList()
|
||||
},
|
||||
// 弹窗相关
|
||||
handleClick (tab, event) {
|
||||
console.log(tab, event)
|
||||
},
|
||||
handleView () {
|
||||
this.showAddDialogForm = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.staff .block,
|
||||
.staff .table {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.el-form-item .el-form-item {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.add-wrap {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.turn-work-list {
|
||||
background-color: pink;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.bl-form3 {
|
||||
&.el-pagination {
|
||||
margin-top: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,71 +0,0 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="staff-archives-charts">
|
||||
<div class="staff-archives-title">性别分布</div>
|
||||
<div>
|
||||
<ve-ring height="300px" :data="chartData" :extend="chartExtend" :settings="chartSettings"></ve-ring>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
this.chartExtend = {
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: 'center',
|
||||
y: '80%',
|
||||
show: true
|
||||
},
|
||||
color: ['#09f', '#eeeeee', '#468251', '#666666'],
|
||||
series: {
|
||||
center: ['50%', '40%']
|
||||
}
|
||||
}
|
||||
return {
|
||||
chartData: {
|
||||
columns: ['分类', '数量'],
|
||||
rows: [
|
||||
{ '分类': '0-3年', '数量': '50' },
|
||||
{ '分类': '3-5年', '数量': '80' },
|
||||
{ '分类': '5-8年', '数量': '58' },
|
||||
{ '分类': '8-10年', '数量': '58' }
|
||||
]
|
||||
},
|
||||
chartSettings: {
|
||||
radius: ['60px', '80px'],
|
||||
itemStyle: {
|
||||
textAlign: 'center'
|
||||
},
|
||||
label: {
|
||||
formatter: params => {
|
||||
console.log(params)
|
||||
return `{a|${params.data.name}\n${params.data.value}人}`
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
color: '#ccc',
|
||||
textAlign: 'center'
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () { },
|
||||
mounted () { },
|
||||
methods: {},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.staff-archives-charts {
|
||||
// width: 50%;
|
||||
}
|
||||
</style>
|
||||
@ -1,55 +0,0 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div>
|
||||
<div class="staff-archives-title">员工数量</div>
|
||||
<div class="staff-archives-content">
|
||||
截至
|
||||
<span class="staff-archives-yellow">2020</span>年
|
||||
<span class="staff-archives-yellow">2</span>月
|
||||
<span class="staff-archives-yellow">20</span>日，
|
||||
<span class="staff-archives-yellow">浙江霖梓控股有限公司</span>在职员工总数为
|
||||
<span class="staff-archives-bule">134</span>人，其中管理人员
|
||||
<span class="staff-archives-bule">134</span>人，占比
|
||||
<span class="staff-archives-bule">20.5%。</span>
|
||||
</div>
|
||||
<div class="staff-archives-content">
|
||||
<span class="staff-archives-yellow">近三个月</span>新入职员工
|
||||
<span class="staff-archives-bule">134</span>人，离职员工
|
||||
<span class="staff-archives-bule">134</span>人，离职率为
|
||||
<span class="staff-archives-bule">134%。</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () { },
|
||||
mounted () { },
|
||||
methods: {},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
.staff-archives {
|
||||
&-content {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
}
|
||||
&-yellow {
|
||||
color: #ed7d31;
|
||||
}
|
||||
&-bule {
|
||||
font-weight: 700;
|
||||
color: #1890ff;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,171 +0,0 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div>
|
||||
<div class="staff-archives-title">条件筛选</div>
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline staff-archives-form">
|
||||
<el-form-item label="选择部门">
|
||||
<el-input placeholder="请选择部门" @focus="isChoose=true" readonly :value="formInline.input3">
|
||||
<!-- <i
|
||||
slot="suffix"
|
||||
class="el-input__icon el-icon-arrow-up"
|
||||
:style="{transform:isChoose?'rotate(0deg)':'rotate(-180deg)'}"
|
||||
@click="isChoose = !isChoose"
|
||||
></i>-->
|
||||
</el-input>
|
||||
<!-- <div :class="{'staff-archives-choose':true,'staff-archives-choose1' :isChoose}">
|
||||
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<span>{{ data.label }}</span>
|
||||
<span>({{ data.number }})人</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>-->
|
||||
<!-- <el-select v-model="value" placeholder="请选择">
|
||||
<el-option>
|
||||
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
||||
</el-option>
|
||||
</el-select>-->
|
||||
<!-- <el-cascader
|
||||
v-model="formInline.value"
|
||||
:options="options"
|
||||
:props="{ expandTrigger: 'hover' }"
|
||||
@change="handleChange"
|
||||
></el-cascader>-->
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="`选择时间段\n(仅对员工数量生效)`">
|
||||
<el-date-picker
|
||||
v-model="formInline.value2"
|
||||
type="daterange"
|
||||
align="right"
|
||||
unlink-panels
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
:picker-options="pickerOptions"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||||
<el-button type="primary" @click="onSubmit">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-dialog title="选择部门" :visible.sync="isChoose" width="30%">
|
||||
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<span>{{ data.label }}</span>
|
||||
<span>({{ data.number }})人</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isChoose = false">取 消</el-button>
|
||||
<el-button type="primary" size="mini" @click="onsumbit">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
isChooseText: '',
|
||||
isChoose: false,
|
||||
data: [{
|
||||
label: '业务前台',
|
||||
number: 24,
|
||||
children: [{
|
||||
label: '商务中心',
|
||||
number: 10
|
||||
}, {
|
||||
label: '运营中心',
|
||||
number: 12
|
||||
}]
|
||||
}, {
|
||||
label: '业务中台',
|
||||
number: 25,
|
||||
children: [{
|
||||
label: '产品中心',
|
||||
number: 12
|
||||
}, {
|
||||
label: '客服中心',
|
||||
number: 13
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
},
|
||||
formInline: {
|
||||
input3: ''
|
||||
},
|
||||
pickerOptions: {
|
||||
shortcuts: [{
|
||||
text: '最近一周',
|
||||
onClick (picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: '最近一个月',
|
||||
onClick (picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}, {
|
||||
text: '最近三个月',
|
||||
onClick (picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () { },
|
||||
mounted () { },
|
||||
methods: {
|
||||
onSumbit () {
|
||||
console.log(13)
|
||||
},
|
||||
onsumbit () {
|
||||
this.formInline.input3 = this.isChooseText
|
||||
this.isChoose = false
|
||||
},
|
||||
handleNodeClick (a, b) {
|
||||
this.isChooseText = a.label
|
||||
|
||||
console.log(this.formInline.input3)
|
||||
}
|
||||
},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.el-input__icon {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.staff-archives-choose {
|
||||
margin: 2px;
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
border: 1px solid #dcdfe6;
|
||||
}
|
||||
.staff-archives-choose1 {
|
||||
height: 0px;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@ -1,67 +0,0 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="staff-archives">
|
||||
<el-card>
|
||||
<query-form />
|
||||
</el-card>
|
||||
<el-card>
|
||||
<employees-number />
|
||||
</el-card>
|
||||
<div class="staff-archives-chart">
|
||||
<el-card v-for="i in 10">
|
||||
<chart-form />
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import chartForm from './componments/chart-form'
|
||||
import queryForm from './componments/query-form'
|
||||
import employeesNumber from './componments/employees-number'
|
||||
export default {
|
||||
components: {
|
||||
chartForm,
|
||||
queryForm,
|
||||
employeesNumber
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () { },
|
||||
mounted () { },
|
||||
methods: {},
|
||||
watch: {}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style >
|
||||
.el-card {
|
||||
margin: 0 0 7px 0 !important;
|
||||
}
|
||||
.staff-archives {
|
||||
overflow: hidden;
|
||||
}
|
||||
.staff-archives-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.staff-archives-form {
|
||||
margin: 20px 0 0 0;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.staff-archives-chart {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
> div {
|
||||
width: 49.6%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,472 +0,0 @@
|
||||
<template>
|
||||
<div class="mod-demo-echarts">
|
||||
<el-alert
|
||||
title="提示："
|
||||
type="warning"
|
||||
:closable="false">
|
||||
<div slot-scope="description">
|
||||
<p class="el-alert__description">1. 此Demo只提供ECharts官方使用文档，入门部署和体验功能。具体使用请参考：http://echarts.baidu.com/index.html</p>
|
||||
</div>
|
||||
</el-alert>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<div id="J_chartLineBox" class="chart-box"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<div id="J_chartBarBox" class="chart-box"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card>
|
||||
<div id="J_chartPieBox" class="chart-box"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card>
|
||||
<div id="J_chartScatterBox" class="chart-box"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
chartLine: null,
|
||||
chartBar: null,
|
||||
chartPie: null,
|
||||
chartScatter: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initChartLine()
|
||||
this.initChartBar()
|
||||
this.initChartPie()
|
||||
this.initChartScatter()
|
||||
},
|
||||
activated () {
|
||||
// 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
|
||||
if (this.chartLine) {
|
||||
this.chartLine.resize()
|
||||
}
|
||||
if (this.chartBar) {
|
||||
this.chartBar.resize()
|
||||
}
|
||||
if (this.chartPie) {
|
||||
this.chartPie.resize()
|
||||
}
|
||||
if (this.chartScatter) {
|
||||
this.chartScatter.resize()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 折线图
|
||||
initChartLine () {
|
||||
var option = {
|
||||
'title': {
|
||||
'text': '折线图堆叠'
|
||||
},
|
||||
'tooltip': {
|
||||
'trigger': 'axis'
|
||||
},
|
||||
'legend': {
|
||||
'data': [ '邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎' ]
|
||||
},
|
||||
'grid': {
|
||||
'left': '3%',
|
||||
'right': '4%',
|
||||
'bottom': '3%',
|
||||
'containLabel': true
|
||||
},
|
||||
'toolbox': {
|
||||
'feature': {
|
||||
'saveAsImage': { }
|
||||
}
|
||||
},
|
||||
'xAxis': {
|
||||
'type': 'category',
|
||||
'boundaryGap': false,
|
||||
'data': [ '周一', '周二', '周三', '周四', '周五', '周六', '周日' ]
|
||||
},
|
||||
'yAxis': {
|
||||
'type': 'value'
|
||||
},
|
||||
'series': [
|
||||
{
|
||||
'name': '邮件营销',
|
||||
'type': 'line',
|
||||
'stack': '总量',
|
||||
'data': [ 120, 132, 101, 134, 90, 230, 210 ]
|
||||
},
|
||||
{
|
||||
'name': '联盟广告',
|
||||
'type': 'line',
|
||||
'stack': '总量',
|
||||
'data': [ 220, 182, 191, 234, 290, 330, 310 ]
|
||||
},
|
||||
{
|
||||
'name': '视频广告',
|
||||
'type': 'line',
|
||||
'stack': '总量',
|
||||
'data': [ 150, 232, 201, 154, 190, 330, 410 ]
|
||||
},
|
||||
{
|
||||
'name': '直接访问',
|
||||
'type': 'line',
|
||||
'stack': '总量',
|
||||
'data': [ 320, 332, 301, 334, 390, 330, 320 ]
|
||||
},
|
||||
{
|
||||
'name': '搜索引擎',
|
||||
'type': 'line',
|
||||
'stack': '总量',
|
||||
'data': [ 820, 932, 901, 934, 1290, 1330, 1320 ]
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
|
||||
this.chartLine.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartLine.resize()
|
||||
})
|
||||
},
|
||||
// 柱状图
|
||||
initChartBar () {
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '直接访问',
|
||||
type: 'bar',
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: '邮件营销',
|
||||
type: 'bar',
|
||||
stack: '广告',
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: '联盟广告',
|
||||
type: 'bar',
|
||||
stack: '广告',
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: '视频广告',
|
||||
type: 'bar',
|
||||
stack: '广告',
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: '搜索引擎',
|
||||
type: 'bar',
|
||||
data: [862, 1018, 964, 1026, 1679, 1600, 1570],
|
||||
markLine: {
|
||||
lineStyle: {
|
||||
normal: {
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
data: [
|
||||
[{ type: 'min' }, { type: 'max' }]
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '百度',
|
||||
type: 'bar',
|
||||
barWidth: 5,
|
||||
stack: '搜索引擎',
|
||||
data: [620, 732, 701, 734, 1090, 1130, 1120]
|
||||
},
|
||||
{
|
||||
name: '谷歌',
|
||||
type: 'bar',
|
||||
stack: '搜索引擎',
|
||||
data: [120, 132, 101, 134, 290, 230, 220]
|
||||
},
|
||||
{
|
||||
name: '必应',
|
||||
type: 'bar',
|
||||
stack: '搜索引擎',
|
||||
data: [60, 72, 71, 74, 190, 130, 110]
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
type: 'bar',
|
||||
stack: '搜索引擎',
|
||||
data: [62, 82, 91, 84, 109, 110, 120]
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chartBar = echarts.init(document.getElementById('J_chartBarBox'))
|
||||
this.chartBar.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartBar.resize()
|
||||
})
|
||||
},
|
||||
// 饼状图
|
||||
initChartPie () {
|
||||
var option = {
|
||||
backgroundColor: '#2c343c',
|
||||
title: {
|
||||
text: 'Customized Pie',
|
||||
left: 'center',
|
||||
top: 20,
|
||||
textStyle: {
|
||||
color: '#ccc'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
visualMap: {
|
||||
show: false,
|
||||
min: 80,
|
||||
max: 600,
|
||||
inRange: {
|
||||
colorLightness: [0, 1]
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '访问来源',
|
||||
type: 'pie',
|
||||
radius: '55%',
|
||||
center: ['50%', '50%'],
|
||||
data: [
|
||||
{ value: 335, name: '直接访问' },
|
||||
{ value: 310, name: '邮件营销' },
|
||||
{ value: 274, name: '联盟广告' },
|
||||
{ value: 235, name: '视频广告' },
|
||||
{ value: 400, name: '搜索引擎' }
|
||||
].sort(function (a, b) { return a.value - b.value }),
|
||||
roseType: 'radius',
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.3)'
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.3)'
|
||||
},
|
||||
smooth: 0.2,
|
||||
length: 10,
|
||||
length2: 20
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#c23531',
|
||||
shadowBlur: 200,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
animationType: 'scale',
|
||||
animationEasing: 'elasticOut',
|
||||
animationDelay: function (idx) {
|
||||
return Math.random() * 200
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
|
||||
this.chartPie.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartPie.resize()
|
||||
})
|
||||
},
|
||||
// 散点图
|
||||
initChartScatter () {
|
||||
var option = {
|
||||
backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [
|
||||
{ offset: 0, color: '#f7f8fa' },
|
||||
{ offset: 1, color: '#cdd0d5' }
|
||||
]),
|
||||
title: {
|
||||
text: '1990 与 2015 年各国家人均寿命与 GDP'
|
||||
},
|
||||
legend: {
|
||||
right: 10,
|
||||
data: ['1990', '2015']
|
||||
},
|
||||
xAxis: {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
scale: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '1990',
|
||||
data: [
|
||||
[28604, 77, 17096869, 'Australia', 1990],
|
||||
[31163, 77.4, 27662440, 'Canada', 1990],
|
||||
[1516, 68, 1154605773, 'China', 1990],
|
||||
[13670, 74.7, 10582082, 'Cuba', 1990],
|
||||
[28599, 75, 4986705, 'Finland', 1990],
|
||||
[29476, 77.1, 56943299, 'France', 1990],
|
||||
[31476, 75.4, 78958237, 'Germany', 1990],
|
||||
[28666, 78.1, 254830, 'Iceland', 1990],
|
||||
[1777, 57.7, 870601776, 'India', 1990],
|
||||
[29550, 79.1, 122249285, 'Japan', 1990],
|
||||
[2076, 67.9, 20194354, 'North Korea', 1990],
|
||||
[12087, 72, 42972254, 'South Korea', 1990],
|
||||
[24021, 75.4, 3397534, 'New Zealand', 1990],
|
||||
[43296, 76.8, 4240375, 'Norway', 1990],
|
||||
[10088, 70.8, 38195258, 'Poland', 1990],
|
||||
[19349, 69.6, 147568552, 'Russia', 1990],
|
||||
[10670, 67.3, 53994605, 'Turkey', 1990],
|
||||
[26424, 75.7, 57110117, 'United Kingdom', 1990],
|
||||
[37062, 75.4, 252847810, 'United States', 1990]
|
||||
],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2
|
||||
},
|
||||
label: {
|
||||
emphasis: {
|
||||
show: true,
|
||||
formatter: function (param) {
|
||||
return param.data[3]
|
||||
},
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(120, 36, 50, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
|
||||
{ offset: 0, color: 'rgb(251, 118, 123)' },
|
||||
{ offset: 1, color: 'rgb(204, 46, 72)' }
|
||||
])
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '2015',
|
||||
data: [
|
||||
[44056, 81.8, 23968973, 'Australia', 2015],
|
||||
[43294, 81.7, 35939927, 'Canada', 2015],
|
||||
[13334, 76.9, 1376048943, 'China', 2015],
|
||||
[21291, 78.5, 11389562, 'Cuba', 2015],
|
||||
[38923, 80.8, 5503457, 'Finland', 2015],
|
||||
[37599, 81.9, 64395345, 'France', 2015],
|
||||
[44053, 81.1, 80688545, 'Germany', 2015],
|
||||
[42182, 82.8, 329425, 'Iceland', 2015],
|
||||
[5903, 66.8, 1311050527, 'India', 2015],
|
||||
[36162, 83.5, 126573481, 'Japan', 2015],
|
||||
[1390, 71.4, 25155317, 'North Korea', 2015],
|
||||
[34644, 80.7, 50293439, 'South Korea', 2015],
|
||||
[34186, 80.6, 4528526, 'New Zealand', 2015],
|
||||
[64304, 81.6, 5210967, 'Norway', 2015],
|
||||
[24787, 77.3, 38611794, 'Poland', 2015],
|
||||
[23038, 73.13, 143456918, 'Russia', 2015],
|
||||
[19360, 76.5, 78665830, 'Turkey', 2015],
|
||||
[38225, 81.4, 64715810, 'United Kingdom', 2015],
|
||||
[53354, 79.1, 321773631, 'United States', 2015]
|
||||
],
|
||||
type: 'scatter',
|
||||
symbolSize: function (data) {
|
||||
return Math.sqrt(data[2]) / 5e2
|
||||
},
|
||||
label: {
|
||||
emphasis: {
|
||||
show: true,
|
||||
formatter: function (param) {
|
||||
return param.data[3]
|
||||
},
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(25, 100, 150, 0.5)',
|
||||
shadowOffsetY: 5,
|
||||
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
|
||||
{ offset: 0, color: 'rgb(129, 227, 238)' },
|
||||
{ offset: 1, color: 'rgb(25, 183, 207)' }
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chartPie = echarts.init(document.getElementById('J_chartScatterBox'))
|
||||
this.chartPie.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.chartPie.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mod-demo-echarts {
|
||||
> .el-alert {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
> .el-row {
|
||||
margin-top: -10px;
|
||||
margin-bottom: -10px;
|
||||
.el-col {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.chart-box {
|
||||
min-height: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,65 +0,0 @@
|
||||
<template>
|
||||
<div class="mod-demo-ueditor">
|
||||
<el-alert
|
||||
title="提示："
|
||||
type="warning"
|
||||
:closable="false">
|
||||
<div slot-scope="description">
|
||||
<p class="el-alert__description">1. 此Demo只提供UEditor官方使用文档，入门部署和体验功能。具体使用请参考：http://fex.baidu.com/ueditor/</p>
|
||||
<p class="el-alert__description">2. 浏览器控制台报错“请求后台配置项http错误，上传功能将不能正常使用！”，此错需要后台提供上传接口方法（赋值给serverUrl属性）</p>
|
||||
</div>
|
||||
</el-alert>
|
||||
|
||||
<script :id="ueId" class="ueditor-box" type="text/plain" style="width: 100%; height: 260px;">hello world!</script>
|
||||
|
||||
<!-- 获取内容 -->
|
||||
<p><el-button @click="getContent()">获得内容</el-button></p>
|
||||
<el-dialog
|
||||
title="内容"
|
||||
:visible.sync="dialogVisible"
|
||||
:append-to-body="true">
|
||||
{{ ueContent }}
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ueditor from 'ueditor'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
ue: null,
|
||||
ueId: `J_ueditorBox_${new Date().getTime()}`,
|
||||
ueContent: '',
|
||||
dialogVisible: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.ue = ueditor.getEditor(this.ueId, {
|
||||
// serverUrl: '', // 服务器统一请求接口路径
|
||||
zIndex: 3000
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getContent () {
|
||||
this.dialogVisible = true
|
||||
this.ue.ready(() => {
|
||||
this.ueContent = this.ue.getContent()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mod-demo-ueditor {
|
||||
position: relative;
|
||||
z-index: 510;
|
||||
> .el-alert {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="site-navbar__header">
|
||||
<h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
|
||||
<a class="site-navbar__brand-lg" href="javascript:;">数字化管理系统</a>
|
||||
<a class="site-navbar__brand-mini" href="javascript:;">人人</a>
|
||||
<a class="site-navbar__brand-mini" href="javascript:;">系统</a>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="site-navbar__body clearfix">
|
||||
|
||||
@ -170,7 +170,7 @@ export default {
|
||||
|
||||
setTimeout(() => {
|
||||
let data = []
|
||||
if (node.data.type == 2) {
|
||||
if (node.data.type === 2) {
|
||||
data = [{
|
||||
departmentName: '技术中心',
|
||||
departmentId: parseInt(Math.random() * 300),
|
||||
@ -199,7 +199,7 @@ export default {
|
||||
type: 4
|
||||
}]
|
||||
}
|
||||
if (node.data.type == 4) {
|
||||
if (node.data.type === 4) {
|
||||
data = [{
|
||||
departmentName: 'xx团队',
|
||||
departmentId: parseInt(Math.random() * 300),
|
||||
|
||||
22
static/js/echarts.min.js
vendored
22
static/js/echarts.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user