Commit d93a2114 authored by xulili's avatar xulili

调整页面

parent 3c1d80a7
......@@ -12,7 +12,7 @@ module.exports = {
assetsPublicPath: '/',
proxyTable: {
'/mall': {
target: "http://192.168.110.67/mall/",
target: "http://192.168.110.67/mall",
changeOrigin: true,
pathRewrite: {
'^/mall': '/' // 重写接口
......
This diff is collapsed.
<template>
<div class="party-table">
<el-table border :data="list" style="width: 100%;height:100%" height="100%">
<el-table-column
label="序号"
align="center"
width="100">
<template slot-scope="scope" >
<span>{{ (currentPage-1) * 10 * scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column
align="center"
v-for="(item,index) in feildList"
:key="index"
:prop="item.prop"
:label="item.label"
:width="item.width">
<template slot-scope="scope" >
<div v-if="item.isEdit" class="table-btn-group">
<el-tooltip content="修改" placement="top">
<el-button circle @click="handleOperate(scope.row,'edit')">
<i class="icon-table icon-edit"></i>
</el-button>
</el-tooltip>
<el-tooltip content="重置密码" placement="top">
<el-button circle @click="handleOperate(scope.row,'reset')">
<i class="icon-table icon-reset"></i>
</el-button>
</el-tooltip>
<el-tooltip content="禁用" placement="top">
<el-button circle @click="handleOperate(scope.row,'disable')">
<i class="icon-table icon-disable"></i>
</el-button>
</el-tooltip>
<el-tooltip content="激活" placement="top">
<el-button circle @click="handleOperate(scope.row,'enable')">
<i class="icon-table icon-enable"></i>
</el-button>
</el-tooltip>
</div>
<div v-else>
<span>{{scope.row[item.prop]}}</span>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data(){
return {
}
},
props:{
currentPage:{
type:Number,
default:1
},
list:{
type:Array,
default:()=>{return []}
},
feildList:{
type:Array,
default:()=>{return []}
}
},
methods:{
handleOperate(row,type){
this.$emit(
"action",
{
row:row,
type:type
}
)
}
}
}
</script>
<style lang="less">
@import '../../../style/table.less';
</style>
\ No newline at end of file
<template>
<div class="party-table">
<el-table border :data="list" style="width: 100%;height:100%" height="100%">
<el-table-column
label="序号"
align="center"
width="100">
<template slot-scope="scope" >
<span>{{ (currentPage-1) * 10 * scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column
align="center"
v-for="(item,index) in feildList"
:key="index"
:prop="item.prop"
:label="item.label"
:width="item.width">
<template slot-scope="scope" >
<div v-if="item.isEdit" class="table-btn-group">
<el-button round class="passed" @click="handleOperate(scope.row,'edit')">
通过
</el-button>
<el-button round class="rejected" @click="handleOperate(scope.row,'edit')">
驳回
</el-button>
</div>
<div v-else>
<span>{{scope.row[item.prop]}}</span>
</div>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data(){
return {
}
},
props:{
currentPage:{
type:Number,
default:1
},
list:{
type:Array,
default:()=>{return []}
},
feildList:{
type:Array,
default:()=>{return []}
}
},
methods:{
handleOperate(row,type){
this.$emit(
"action",
{
row:row,
type:type
}
)
}
}
}
</script>
<style lang="less">
@import '../../../style/table.less';
</style>
\ No newline at end of file
<template>
<!-- 账号禁用审核 -->
<div class="recheck-wrapper height100">
<div class="search-container">
<el-form :inline="true" :model="form">
<el-form-item>
<el-input
v-model="form.user"
placeholder="请输入账号名称、提交人"
suffix-icon="el-icon-search"
clearable
>
</el-input>
</el-form-item>
<el-form-item>
<el-select
v-model="form.status"
placeholder="请选择账号状态"
clearable
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<div class="btn-group">
<el-button type="primary" @click="handleSubmit">查询</el-button>
<el-button @click="handleReset">重置</el-button>
</div>
</el-form-item>
</el-form>
<div class="page-tip">
<span class="page-tip-title">页面说明:</span>
<span class="page-tips">展示所有禁用账号的申请,审核通过后,该账号状态为禁用,无法在系统中使用</span>
</div>
</div>
<div class="table-content">
<check-table
class="noAdd"
:feildList="feildList"
:list="list"
@action="handleAction"
/>
<party-pagination/>
</div>
<user-dialog/>
</div>
</template>
<script>
import { partyPagination } from '@/components/index'
import checkTable from './components/checkTable'
import userDialog from './userDialog/index'
export default {
data(){
return{
form:{
user:'',
status:''
},
addForm:{
},
options:[
{label:'待激活',value:0},
{label:'活跃',value:1},
{label:'禁用待审核',value:2},
{label:'禁用',value:3},
],
feildList:[
{prop:'username',label:'账号名称'},
{prop:'org',label:'所在机构'},
{prop:'endTime',label:'提交人'},
{prop:'endTime',label:'提交日期'},
{prop:'endTime',label:'审核状态'},
{prop:'',label:'操作',isEdit:true, width:240},
],
list: [
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
]
}
},
components:{ partyPagination, checkTable, userDialog},
mounted(){
},
methods:{
handleSubmit(){
},
handleReset(){
this.form.user = ''
},
// 弹窗关闭
handleClose(){
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
},
handleAction(params){
console.log(params.type)
}
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<!-- 统计用户管理 -->
<div class="user-wrapper height100">
<div class="search-container">
<el-form :inline="true" :model="form">
<el-form-item>
<el-input
v-model="form.user"
placeholder="请输入用户名"
suffix-icon="el-icon-search"
></el-input>
</el-form-item>
<el-form-item>
<el-select
v-model="form.status"
placeholder="请选择账号状态"
clearable
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<div class="btn-group">
<el-button type="primary" @click="handleSubmit">查询</el-button>
<el-button @click="handleReset">重置</el-button>
</div>
</el-form-item>
</el-form>
<div class="page-tip">
<span class="page-tip-title">页面说明:</span>
<span class="page-tips">可按按照用户名及账号状态进行信息筛选。可新增统计账号,“*”为必填项。</span>
</div>
</div>
<div class="table-content">
<div class="btn-group">
<el-button type="primary">新建统计账户</el-button>
</div>
<!-- <party-table :feildList="feildList" :list="list"></party-table> -->
<account-table
:feildList="feildList"
:list="list"
@action="handleAction"
/>
<party-pagination/>
</div>
<user-dialog/>
</div>
</template>
<script>
import { partyPagination } from '@/components/index'
import accountTable from './components/accountTable'
import userDialog from './userDialog/index'
export default {
data(){
return{
form:{
user:'',
status:''
},
addForm:{
},
options:[
{label:'待激活',value:0},
{label:'活跃',value:1},
{label:'禁用待审核',value:2},
{label:'禁用',value:3},
],
feildList:[
{prop:'username',label:'平台用户名'},
{prop:'org',label:'所在机构'},
{prop:'endTime',label:'到期时间'},
{prop:'type',label:'账号类型'},
{prop:'status',label:'账号状态'},
{prop:'',label:'操作',isEdit:true, width:280},
],
list: [
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
]
}
},
components:{ partyPagination, accountTable, userDialog},
mounted(){
},
methods:{
handleSubmit(){
},
handleReset(){
this.form.user = ''
},
// 弹窗关闭
handleClose(){
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
},
handleAction(params){
console.log(params.type)
}
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<!-- 机顶盒运维账号 -->
<div class="stb-amin-wrapper height100">
<div class="search-container">
<el-form :inline="true" :model="form">
<el-form-item>
<el-input
v-model="form.user"
placeholder="请输入运维人员姓名"
suffix-icon="el-icon-search"
clearable
>
</el-input>
</el-form-item>
<el-form-item>
<el-select
v-model="form.status"
placeholder="请选择账号状态"
clearable
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<div class="btn-group">
<el-button type="primary" @click="handleSubmit">查询</el-button>
<el-button @click="handleReset">重置</el-button>
</div>
</el-form-item>
</el-form>
<div class="page-tip">
<span class="page-tip-title">页面说明:</span>
<span class="page-tips">可按按照用户名及账号状态进行信息筛选。可新增机顶盒运维账号,“*”为必填项。</span>
</div>
</div>
<div class="table-content">
<div class="btn-group">
<el-button type="primary">新建运维账号</el-button>
</div>
<!-- <party-table :feildList="feildList" :list="list"></party-table> -->
<account-table
:feildList="feildList"
:list="list"
@action="handleAction"
/>
<party-pagination/>
</div>
<user-dialog/>
</div>
</template>
<script>
import { partyPagination } from '@/components/index'
import accountTable from './components/accountTable'
import userDialog from './userDialog/index'
export default {
data(){
return{
form:{
user:'',
status:''
},
addForm:{
},
options:[
{label:'待激活',value:0},
{label:'活跃',value:1},
{label:'禁用待审核',value:2},
{label:'禁用',value:3},
],
feildList:[
{prop:'username',label:'运维人员姓名'},
{prop:'org',label:'运维区域'},
{prop:'endTime',label:'到期时间'},
{prop:'status',label:'账号状态'},
{prop:'',label:'操作',isEdit:true, width:280},
],
list: [
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
]
}
},
components:{ partyPagination, accountTable, userDialog},
mounted(){
},
methods:{
handleSubmit(){
},
handleReset(){
this.form.user = ''
},
// 弹窗关闭
handleClose(){
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
},
handleAction(params){
console.log(params.type)
}
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<!-- 平台用户单位管理员账号管理 -->
<div class="unit-admin-wrapper height100">
<div class="search-container">
<el-form :inline="true" :model="form">
<el-form-item>
<el-input
v-model="form.user"
placeholder="请输入用户名"
placeholder="请输入管理人员姓名"
suffix-icon="el-icon-search"
></el-input>
clearable
>
</el-input>
</el-form-item>
<el-form-item>
<el-input
v-model="form.user"
placeholder="请输入用户名"
suffix-icon="el-icon-search"
></el-input>
<el-form-item>
<el-select
v-model="form.status"
placeholder="请选择单位名称"
clearable
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-cascader :options="options" :show-all-levels="false"></el-cascader>
<el-form-item>
<el-cascader :options="areaOption" :show-all-levels="false"></el-cascader>
</el-form-item>
<el-form-item>
<div class="btn-group">
......@@ -28,69 +38,69 @@
</el-form>
<div class="page-tip">
<span class="page-tip-title">页面说明:</span>
<span class="page-tips">可根据用户名称搜索对用户信息进行筛选。可以新增账号,“*”为必填项。可以对账号信息进行修改及重置密码</span>
<span class="page-tips">管理员姓名即管理员用户名。可以新增账号,“*”为必填项。可以对账号信息进行修改及重置密码</span>
</div>
</div>
<div class="table-content">
<div class="btn-group">
<el-button type="primary">新建账</el-button>
<el-button type="primary">新建账</el-button>
</div>
<party-table :feildList="feildList" :list="list"></party-table>
<!-- <party-table :feildList="feildList" :list="list"></party-table> -->
<account-table
:feildList="feildList"
:list="list"
@action="handleAction"
/>
<party-pagination/>
</div>
<user-dialog/>
</div>
</template>
<script>
import { partyPagination,partyTable } from '@/components/index'
import { partyPagination } from '@/components/index'
import accountTable from './components/accountTable'
import userDialog from './userDialog/index'
import area from '@/config/area'
export default {
data(){
return{
options: area,
form:{
user:''
user:'',
status:''
},
addForm:{
},
areaOption:[],
options:[
{label:'待激活',value:0},
{label:'活跃',value:1},
{label:'禁用待审核',value:2},
{label:'禁用',value:3},
],
feildList:[
{prop:'date',label:'日期'},
{prop:'name',label:'姓名'},
{prop:'address',label:'地址'},
{prop:'username',label:'运维人员姓名'},
{prop:'org',label:'运维区域'},
{prop:'endTime',label:'到期时间'},
{prop:'status',label:'账号状态'},
{prop:'',label:'操作',isEdit:true, width:280},
],
list: [
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
]
}
},
components:{ partyPagination, partyTable, userDialog},
components:{ partyPagination, accountTable, userDialog},
mounted(){
},
......@@ -108,6 +118,9 @@ export default {
done();
})
.catch(_ => {});
},
handleAction(params){
console.log(params.type)
}
}
}
......
<template>
<el-dialog
custom-class="party-dialog"
title="提示"
:visible.sync="dialogVisible"
width="468px"
:before-close="handleClose">
<div class="dialog-content">
<el-form ref="form" :model="form" label-width="80px" label-position="top" class="party-form">
<el-form-item label="系统用户名" >
<el-input v-model="form.name" placeholder="请填写"></el-input>
</el-form-item>
<el-form-item label="所在机构" >
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="账号有效期" >
<el-radio-group v-model="form.radio">
<el-radio :label="3">永久有效</el-radio>
<el-radio :label="6">设置有效期</el-radio>
</el-radio-group>
<el-date-picker
class="mt16"
v-model="form.date"
type="date"
placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
<el-form-item label="账号状态" >
<el-radio-group v-model="form.radio">
<el-radio :label="3">激活</el-radio>
<el-radio :label="6">禁用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="账号类型" >
<el-checkbox-group v-model="form.name">
<el-checkbox label="超级管理员" name="type"></el-checkbox>
<el-checkbox label="后台管理员" name="type"></el-checkbox>
<el-checkbox label="展板管理员" name="type"></el-checkbox>
<el-checkbox label="视频管理员" name="type"></el-checkbox>
<el-checkbox label="视频及展板审核" name="type"></el-checkbox>
<el-checkbox label="账号禁用审核员" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer btn-group">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data(){
return {
dialogVisible:false,
form:{
name:'',
date:''
}
}
},
methods:{
// 弹窗关闭
handleClose(){
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<!-- 平台用户管理 -->
<div class="user-wrapper height100">
<div class="search-container">
<el-form :inline="true" :model="form">
<el-form-item>
<el-input
v-model="form.user"
placeholder="请输入用户名"
placeholder="请输入平台用户名"
suffix-icon="el-icon-search"
></el-input>
</el-form-item>
......@@ -25,14 +26,20 @@
<div class="btn-group">
<el-button type="primary">新建账户</el-button>
</div>
<party-table :feildList="feildList" :list="list"></party-table>
<!-- <party-table :feildList="feildList" :list="list"></party-table> -->
<account-table
:feildList="feildList"
:list="list"
@action="handleAction"
/>
<party-pagination/>
</div>
<user-dialog/>
</div>
</template>
<script>
import { partyPagination,partyTable } from '@/components/index'
import { partyPagination } from '@/components/index'
import accountTable from './components/accountTable'
import userDialog from './userDialog/index'
export default {
data(){
......@@ -45,40 +52,30 @@ export default {
},
feildList:[
{prop:'date',label:'日期'},
{prop:'name',label:'姓名'},
{prop:'address',label:'地址'},
{prop:'username',label:'平台用户名'},
{prop:'org',label:'所在机构'},
{prop:'endTime',label:'到期时间'},
{prop:'type',label:'账号类型'},
{prop:'status',label:'账号状态'},
{prop:'',label:'操作',isEdit:true, width:280},
],
list: [
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
{ username: '丁晓晓', org:'北京市政府',type:'系统管理员',endTime:'永久有效', status:'活跃'},
]
}
},
components:{ partyPagination, partyTable, userDialog},
components:{ partyPagination, accountTable, userDialog},
mounted(){
},
......@@ -96,6 +93,9 @@ export default {
done();
})
.catch(_ => {});
},
handleAction(params){
console.log(params.type)
}
}
}
......
<template>
<div class="account-wrapper">
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
\ No newline at end of file
<template>
<div class="ul-wrapper height100">
<div class="panel-table">
<ul class="title-wrapper">
<li v-for="(item,index) in tList" :key="index">
{{item}}
</li>
</ul>
<ul class="panel-table-content">
<li v-for="(item,index) in data.slice(0,5)" :key="index">
<span v-for="(s,key) in item" :key='key'>
<img :src="getImg(s)" alt="" v-if="s<4">
<p v-else>{{s}}</p>
</span>
</li>
</ul>
</div>
<div class="panel-table">
<ul class="title-wrapper">
<li v-for="(item,index) in tList" :key="index">
{{item}}
</li>
</ul>
<ul class="panel-table-content">
<li v-for="(item,index) in data.slice(5,10)" :key="index">
<span v-for="(s,key) in item" :key='key'>
{{s}}
</span>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data(){
return{
}
},
props:{
tList:{
type:Array,
default:[]
},
data:{
type:Array,
default:()=>{return []}
}
},
methods:{
getImg(s){
return require('@/assets/overview/rank0'+ s + '.png')
}
}
}
</script>
<style lang="less" scoped>
.ul-wrapper{
display: flex;
padding: 15px 20px 40px;
.panel-table{
width: 50%;
&:first-child{
padding-right: 10px;
}
&:last-child{
padding-left: 10px;
}
.title-wrapper{
display: flex;
height: 48px;
line-height: 48px;
li{
text-align: center;
width: 40%;
&:first-child{width: 20%;}
}
}
.panel-table-content{
height: calc(100% - 56px);
li{
width: 100%;
height: 20%;
line-height: 1;
max-height: 48px;
background-color:@party-bg-gray;
margin-bottom: 4px;
border-radius: 2px;
display: flex;
align-items: center;
span{
text-align: center;
width: 40%;
display: inline-block;
&:first-child{width: 20%;}
}
img{
width: 18px;
vertical-align: middle;
}
}
}
}
}
</style>
\ No newline at end of file
<template>
<div id="dialogBarDemand"></div>
<div id="dialogBarDemand" style="width:100%;height:100%"></div>
</template>
<script>
......@@ -17,17 +17,33 @@
},
methods: {
init(){
let option = {
let option = {
tooltip: {
trigger: 'axis'
},
grid: {
top:20,
left: '0%',
right: '2%',
bottom: '5%',
containLabel: true
top: 40,
left: '2%',
right: 40,
bottom: 30,
containLabel: true
},
// dataZoom: [{
// type: "slider",
// show: true,
// bottom: 0,
// start: 0,
// end: 100,
// height: 18,
// handleStyle: {
// color: "#d3dee5",
// },
// textStyle: {
// color: "#fff",
// fontSize: "10px"
// },
// }
// ],
xAxis: {
type: 'category',
boundaryGap: true,//坐标轴两边留白
......@@ -37,7 +53,7 @@
axisLabel: { //坐标轴刻度标签的相关设置。
interval:0,
textStyle: {
color: '#FFFFFF',
color: '#333333',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 14,
......@@ -55,7 +71,7 @@
},
axisLine:{//坐标轴轴线相关设置
lineStyle:{
color:'rgba(98,186,255,0.6)',
color:'#eeeeee',
type:'solid'
}
},
......@@ -71,7 +87,7 @@
max:100,
axisLabel: {
textStyle: {
color: '#FFFFFFFF',
color: '#333333',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
......@@ -87,7 +103,7 @@
splitLine: {
show: true,
lineStyle: {
color: 'rgba(98,186,255,0.6)',
color:'#eeeeee',
type:'dashed'
}
}
......@@ -103,7 +119,7 @@
},
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
'rgba(78,255,253,1)', 'rgba(255,74,83,1)'
'#AC9374', '#9B1E23'
].map((color, offset) => ({
color,
offset
......@@ -123,7 +139,6 @@
<style lang="less">>
#dialogBarDemand{
width: 100%;
height: 16vh;
margin-top: 0.6rem;
height: 100%;
}
</style>
<template>
<div id="dialogTends"></div>
<div id="dialogTends" style="width:100%;height:100%"></div>
</template>
<script>
......@@ -25,25 +25,26 @@ export default {
grid: {
top:20,
left: '2%',
right: 20,
bottom: '15%',
right: 40,
bottom: 30,
containLabel: true
},
dataZoom: [{
type: "slider",
show: true,
bottom: '0',
start: 0,
end: 100,
height: 18,
handleStyle: {
color: "#d3dee5",
},
textStyle: {
color: "#fff",
fontSize: "10px"
},
}],
// dataZoom: [{
// type: "slider",
// show: true,
// bottom: 0,
// start: 0,
// end: 100,
// height: 18,
// handleStyle: {
// color: "#d3dee5",
// },
// textStyle: {
// color: "#fff",
// fontSize: "10px"
// },
// }
// ],
xAxis: {
type: 'category',
boundaryGap: false,//坐标轴两边留白
......@@ -53,7 +54,7 @@ export default {
'2021/01/21', '2021/01/22', '2021/01/23', '2021/01/24', '2021/01/25', '2021/01/26', '2021/01/27', '2021/01/28','2021/01/29', '2021/01/30','2021/01/31'],
axisLabel: { //坐标轴刻度标签的相关设置。
textStyle: {
color: '#FFFFFF',
color: '#333333',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 14,
......@@ -64,7 +65,7 @@ export default {
},
axisLine:{//坐标轴轴线相关设置
lineStyle:{
color:'rgba(98,186,255,0.6)',
color:'#eeeeee',
type:'solid'
}
},
......@@ -79,7 +80,7 @@ export default {
max:100,
axisLabel: {
textStyle: {
color: '#FFFFFFFF',
color: '#333333',
fontStyle: 'normal',
fontFamily: '微软雅黑',
fontSize: 12,
......@@ -95,7 +96,7 @@ export default {
splitLine: {
show: true,
lineStyle: {
color: 'rgba(98,186,255,0.6)',
color:'#eeeeee',
type:'dashed'
}
}
......@@ -108,18 +109,18 @@ export default {
smooth:true,
itemStyle: {
normal: {
color:'rgba(255,74,83,1)',
color:'#AC9374',
lineStyle: {
color: "rgba(78,255,253,1)",
color: "#9B1E23",
width:1
},
areaStyle: {
color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: 'rgba(255,74,83,0.4)'
color: 'rgba(172,141,116,0.4)'
}, {
offset: 1,
color: 'rgba(78,255,253,0.4)'
color: 'rgba(155,30,35,0.4)'
}]),
}
}
......@@ -141,7 +142,6 @@ export default {
<style lang="less">
#dialogTends{
width: 100%;
height: 16vh;
margin-top: 0.6rem;
height: 100%;
}
</style>
......@@ -6,7 +6,8 @@ import mapDiv from './maps'
import borderNums from './borderNums'
// import MDialog from './MDialog'
import bar from './echarts/bar'
import line from './echarts/line'
import trendLine from './echarts/line'
import rankTable from './detail-table/rankTable'
export {
demand,
interaction,
......@@ -16,5 +17,6 @@ export {
borderNums,
// MDialog,
bar,
line
trendLine,
rankTable
}
/* 互动频次 */
<template>
<div class="interaction-wrapper height100">
<bar/>
<div class="interaction-wrapper height100 overview-detail">
<div class="ecahrts-panel-box">
<div class="panel-box-header">
<span class="title">互动频次</span>
<div class="tip">
<span class="tip-title">页面说明:</span>
<span> 可查看当前系统各项数据统计情况。互动频次及点播趋势图展示部分数据,可进入互动统计及趋势分析详情页查看全部数据。</span>
</div>
</div>
<div class="panel-box-content">
<bar/>
</div>
</div>
<div class="rank-panel-box">
<div class="panel-box-header">
<span class="title">互动频次排行</span>
</div>
<div class="panel-box-content">
<rank-table
:tList="tList"
:data="data"
/>
</div>
</div>
</div>
</template>
<script>
import {bar} from './components'
import {bar,rankTable} from './components'
export default {
data(){
return {
tList:['排名','统计时间','点播总量'],
data:[
{index:1,time:'2021年1月',num:'268'},
{index:2,time:'2021年1月',num:'268'},
{index:3,time:'2021年1月',num:'268'},
{index:4,time:'2021年1月',num:'268'},
{index:5,time:'2021年1月',num:'268'},
{index:6,time:'2021年1月',num:'268'},
{index:7,time:'2021年1月',num:'268'},
{index:8,time:'2021年1月',num:'268'},
{index:9,time:'2021年1月',num:'268'},
{index:10,time:'2021年1月',num:'268'}
]
}
},
components:{bar},
components:{bar,rankTable},
methods:{
}
......
......@@ -2,24 +2,59 @@
<template>
<div class="trend-wrapper height100 overview-detail">
<div class="ecahrts-panel-box">
<div class="panel-box-header">
<span class="title">趋势图</span>
<el-date-picker
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
<div class="tip">
<span class="tip-title">页面说明:</span>
<span>默认展示当月点播总量趋势图及详情表格,可按照时间段进行检索,图表可以联动变化。</span>
</div>
</div>
<div class="panel-box-content">
<trend-line/>
</div>
</div>
<div class="rank-panel-box">
<div class="rank-box"></div>
<div class="rank-box"></div>
<div class="panel-box-header">
<span class="title">点播趋势排行</span>
</div>
<div class="panel-box-content">
<rank-table
:tList="tList"
:data="data"
/>
</div>
</div>
<line/>
</div>
</template>
<script>
import {line} from './components'
import {trendLine, rankTable} from './components'
export default {
data(){
return {
value1:'',
tList:['排名','统计时间','点播总量'],
data:[
{index:1,time:'2021年1月',num:'268'},
{index:2,time:'2021年1月',num:'268'},
{index:3,time:'2021年1月',num:'268'},
{index:4,time:'2021年1月',num:'268'},
{index:5,time:'2021年1月',num:'268'},
{index:6,time:'2021年1月',num:'268'},
{index:7,time:'2021年1月',num:'268'},
{index:8,time:'2021年1月',num:'268'},
{index:9,time:'2021年1月',num:'268'},
{index:10,time:'2021年1月',num:'268'}
]
}
},
components:{line},
components:{trendLine, rankTable},
methods:{
}
......@@ -27,20 +62,5 @@ export default {
</script>
<style lang="less" scoped>
.overview-detail{
.ecahrts-panel-box{
height: calc(50% + 20px);
}
.rank-panel-box{
height: calc(50% - 40px);
margin-top: 20px;
}
.ecahrts-panel-box,
.rank-panel-box{
background: #FFFFFF;
box-shadow: 0 4px 8px 0 rgba(221,221,221,0.40);
border-radius: 8px;
border-radius: 8px;
}
}
</style>
\ No newline at end of file
<template>
<div class="edition-wrapper height100">
<div class="search-container">
<el-form :inline="true" :model="form">
<el-form-item>
<el-date-picker
v-model="form.user"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item>
<div class="btn-group">
<el-button type="primary" @click="handleSubmit">查询</el-button>
<el-button @click="handleReset">重置</el-button>
</div>
</el-form-item>
</el-form>
<div class="page-tip">
<span class="page-tip-title">页面说明:</span>
<span class="page-tips">可查看系统使用过的所有app版本信息,可设置其中一个版本为当前使用版本。可产看安装包详情信息。可上传新的安装包,“*”为必填项。</span>
</div>
</div>
<div class="table-content">
<div class="btn-group">
<el-button type="primary">上传安装包</el-button>
</div>
<party-table :feildList="feildList" :list="list"></party-table>
<party-pagination/>
</div>
<edition-dialog/>
</div>
</template>
<script>
import { partyPagination,partyTable } from '@/components/index'
import {
addDialog,
infoDialog
}from './editionDialog'
export default {
data(){
return{
form:{
user:''
},
addForm:{
},
feildList:[
{prop:'date',label:'日期'},
{prop:'name',label:'姓名'},
{prop:'address',label:'地址'},
],
list: [
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
{ date: '2016-05-02',name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
]
}
},
components:{ partyPagination, partyTable, addDialog, infoDialog},
mounted(){
},
methods:{
handleSubmit(){
},
handleReset(){
this.form.user = ''
},
// 弹窗关闭
handleClose(){
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
......@@ -41,7 +41,7 @@
</div>
</div>
<div class="table-content hasTabs">
<party-table :feildList="feildList" :list="list"></party-table>
<party-table class="noAdd" :feildList="feildList" :list="list"></party-table>
<party-pagination/>
</div>
</div>
......
<template>
<el-dialog
custom-class="party-dialog"
title="新建机构"
:visible.sync="dialogVisible"
width="468px"
:before-close="handleClose"
>
<div class="dialog-content">
<el-form
ref="form"
:rules="rules"
:model="form"
label-width="80px"
label-position="top"
class="party-form"
>
<el-form-item label="新增类别:" prop="level">
<el-radio-group v-model="form.level">
<el-radio
v-for="(item, index) in levelOption"
:key="index"
:label="item.label"
>
{{ item.value }}
</el-radio>
</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="areaId">
<el-cascader
v-model="form.areaId"
change-on-select
:props="cascaderProps"
:options="areaOptions"
>
</el-cascader>
</el-form-item>
<el-form-item label="备注">
<el-input
v-model="form.remarks"
type="textarea"
placeholder="请输入"
></el-input>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer btn-group">
<el-button @click="handleCancle()">取 消</el-button>
<el-button type="primary" @click="handleSubmit()" :disabled="disabled"
>确 定</el-button
>
</div>
</el-dialog>
</template>
<script>
import { getAreas } from "@/config/area";
export default {
data() {
return {
dialogVisible: true,
form: {
name: "",
areaId: [],
level: "",
remarks: "",
},
disabled: false,
areaOptions: [],
cascaderProps: {
label: "name",
value: "id",
checkStrictly: true,
},
levelOption: [],
rules: {
level: [
{ required: true, message: "请选择用户类别", trigger: "change" },
],
name: [
{ required: true, message: "请输入机构名称", trigger: "change" },
],
areaId: [
{ required: true, message: "请选择地理位置", trigger: "change" },
],
},
};
},
props: {
level: {
type: Number,
default: 1,
},
},
mounted() {
this.getLevelOption();
getAreas().then((res) => {
this.areaOptions = res;
});
},
methods: {
// 弹窗关闭
handleClose() {
this.$confirm("确认关闭?")
.then((_) => {
done();
})
.catch((_) => {});
},
handleCancle() {
this.handleClose();
},
handleSubmit() {
// 校验用户输入值
this.$refs.form.validate((valid) => {
if (valid) {
let params = {};
params.name = this.form.name;
params.areaId = [...this.form.areaId].pop();
params.remarks = this.form.remarks;
params.level = this.form.level;
let requestparams = this.$qs.stringify(params);
this.$https(
{
method: "post",
url: "organ/add",
},
requestparams
)
.then((res) => {
console.log(res);
if (res.data.code != 200) {
this.$message({
type: "success",
message: res.data.message,
});
} else {
this.$message.error(res.data.message);
}
})
.catch((err) => {
console.log(res);
});
} else {
console.log("error submit!!");
return false;
}
});
},
getLevelOption() {
this.form.level = this.level;
if (this.level === 1) {
this.levelOption = [
{ label: 1, value: "平级机构" },
{ label: 2, value: "下级机构" },
];
} else if (this.level === 2) {
this.levelOption = [
{ label: 1, value: "上级机构" },
{ label: 2, value: "平级机构" },
{ label: 3, value: "下级机构" },
];
} else if (this.level === 3) {
this.levelOption = [
{ label: 2, value: "上级机构" },
{ label: 3, value: "平级机构" },
];
} else {
this.levelOption = [];
}
},
},
watch: {
level() {
// level 1 没有上级 level 3 没有下级
this.getLevelOption();
},
},
};
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
<template>
<p> 编辑</p>
</template>
export default{
}
<style lang="less" scoped>
</style>
\ No newline at end of file
import orgAdd from './add'
import orgEdit from './edit'
export{
orgAdd,
orgEdit
}
<template>
<div class="oran-wrapper">
<div class="org-tree">
<div class="org-tree-box">
</div>
</div>
<div class=""></div>
<div class="oran-wrapper height100">
<div class="org-tree-container">
<div class="org-tree-box">
<div class="org-tree-box-header">组织结构</div>
<div class="org-tree-box-content">
<div class="tree-search party-form">
<el-input
placeholder="请输入组织结构名称"
v-model="orgName"
suffix-icon="el-icon-search"
clearable
>
</el-input>
<div class="f0">
<el-tooltip content="新建" placement="top">
<i class="icon-add party-icon-20" />
</el-tooltip>
<el-tooltip content="导入" placement="top">
<i class="icon-import party-icon-20" />
</el-tooltip>
</div>
</div>
<div class="tree-content">
<el-tree
class="org-tree"
:data="data"
:props="defaultProps"
@node-click="handleNodeClick"
>
<div
class="custom-tree-node"
slot-scope="{ node, data }"
:class="'tree-node-level' + data.level"
>
<i class="icon-org" v-if="data.level === 1"></i>
<span>{{ node.label }}</span>
</div>
</el-tree>
</div>
</div>
</div>
</div>
<div class="org-detail">
<div class="org-detail-panel-box">
<span class="title">{{ title }}</span>
<div class="icon-group">
<i class="icon-edit party-icon-24"> </i>
<i class="icon-del party-icon-24"> </i>
</div>
</div>
<div class="org-detail-panel-box-content">
<div class="page-tip">
<p class="page-tip-title">页面说明:</p>
<p class="page-tip-des">
点击相应的机构名称,可查看该机构的详细信息。可新增机构、删除机构及批量导入机构信息。新增机构中“*”为必填项
</p>
</div>
<el-form label-position="top" :inline="true">
<el-form-item label="上级机构" class="w50">
<span>中国国家博物馆</span>
</el-form-item>
<el-form-item label="下级机构" class="w50">
<span>中国国家博物馆</span>
</el-form-item>
<el-form-item label="地理位置" class="w100">
<span>北京市海淀区</span>
</el-form-item>
<el-form-item label="备注信息" class="w100">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
euismod bibendum laoreet. Proin gravida dolor sit amet lacus
accumsan et viverra justo commodo. Proin sodales pulvinar tempor.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra
vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.
</span>
</el-form-item>
</el-form>
</div>
<org-add/>
<org-edit/>
</div>
</div>
</template>
<script>
export default {
data(){
return{
}
let res = {
code: "200",
body: [
{
children: [
{
children: [
{
children: [],
city: 1,
country: 1,
createTime: "2020-03-22",
icon: "1",
id: "3",
isDeleted: false,
level: 3,
name: "xe",
parentId: "2",
province: 1,
remarks: "1",
updateTime: "2021-03-22",
},
],
city: 1,
country: 1,
createTime: "2021-03-22",
icon: "1",
id: "2",
isDeleted: false,
level: 2,
name: "测试2级",
parentId: "1",
province: 1,
remarks: "1",
updateTime: "2021-03-22",
},
{
children: [],
city: 1,
country: 1,
createTime: "2021-03-22",
icon: "1",
id: "4",
isDeleted: false,
level: 2,
name: "测试2级2",
parentId: "1",
province: 1,
remarks: "1",
updateTime: "2021-03-22",
},
],
city: 1101,
country: 11011,
createTime: "2021-03-22",
icon: "0",
id: "1",
isDeleted: false,
level: 1,
name: "国博",
parentId: "0",
province: 110005,
remarks: "0",
updateTime: "2021-03-22",
},
mounted(){
{
children: [],
city: 1,
country: 1,
createTime: "2021-03-22",
icon: "1",
id: "1373918679665557505",
isDeleted: false,
level: 1,
name: "测试",
parentId: "0",
province: 1,
remarks: "1",
updateTime: "2021-03-22",
},
methods:{
}
}
{
children: [],
city: 110100,
country: 110108,
createTime: "2021-03-23",
icon: "0",
id: "1374238828926935042",
isDeleted: false,
level: 1,
name: "测试11",
parentId: "0",
province: 110000,
remarks: "测试",
updateTime: "2021-03-23",
},
{
children: [],
city: 110100,
country: 110108,
createTime: "2021-03-23",
icon: "0",
id: "1374239612615909378",
isDeleted: false,
level: 1,
name: "测试22",
parentId: "0",
province: 110000,
remarks: "测试",
updateTime: "2021-03-23",
},
],
};
import {orgAdd, orgEdit} from './orgDialog'
export default {
data() {
return {
orgName: "",
data: res.body,
defaultProps: {
children: "children",
label: "name",
},
title: "国博",
};
},
components:{orgAdd,orgEdit},
methods: {
handleNodeClick(data) {
console.log(data);
},
},
};
</script>
<style lang="less" scoped>
.oran-wrapper{
.oran-wrapper {
display: flex;
.org-tree-container {
width: 420px;
padding-right: 20px;
height: 100%;
.org-tree-box {
height: 100%;
background: @party-white;
border: 1px solid @party-white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
.org-tree-box-header {
height: 56px;
line-height: 56px;
background-color: @party-red;
text-align: center;
font-size: 16px;
color: @party-white;
}
/deep/ .tree-search {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 10px;
.el-input__icon {
width: 40px;
font-size: 20px;
color: @party-btn-color;
}
.icon-import {
margin-left: 10px;
}
}
.org-tree-box-content {
padding: 20px;
}
}
}
.org-detail {
width: calc(100% - 420px);
height: 100%;
background: @party-white;
border: 1px solid @party-white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
.org-detail-panel-box {
height: 64px;
border-bottom: 1px solid @party-border-color;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
.title{
font-size: 20px;
font-weight: bold;
color: @font-color;
}
.icon-del {
margin-left: 30px;
}
}
.org-detail-panel-box-content {
height: calc(100% - 64px);
padding: 20px;
overflow-y: scroll;
.page-tip {
width: 648px;
height: 72px;
background: @party-bg-gray;
border-radius: 8px;
color: @font-color;
display: flex;
padding: 16px 20px;
margin: 0 auto 40px;
.page-tip-title {
width: 100px;
font-weight: bold;
}
}
.el-form {
width: 648px;
margin: 0 auto;
.w50 { width: calc(50% - 15px); }
.w100 { width: 100%;}
.el-form-item__content{
span{
color: @font-color;
font-weight: bold;
}
}
}
}
}
}
</style>
\ No newline at end of file
export let accoutsRoute = [
// 平台用户管理
{
path: '/users',
name: '平台用户管理',
component: () => import('@/page/accounts/users'),
meta:{
showBreadcrumb:true,
title:'平台用户管理',
}
},
//统计用户管理
{
path: '/statisticalUser',
name: '统计用户管理',
component: () => import('@/page/accounts/statistical'),
meta:{
showBreadcrumb:true,
title:'统计用户管理',
}
},
// 平台用户单位管理员账号
{
path: '/unitAdmin',
name: '平台用户单位管理员账号管理',
component: () => import('@/page/accounts/unitAdmin'),
meta:{
showBreadcrumb:true,
title:'单位管理员账号管理',
}
},
// 机顶盒运维账号管理
{
path: '/stbAccount',
name: '机顶盒运维账号',
component: () => import('@/page/accounts/stbAdmin'),
meta:{
showBreadcrumb:true,
title:'机顶盒运维账号',
}
},
// 账号禁用审核
{
path: '/recheck',
name: '账号禁用审核',
component: () => import('@/page/accounts/recheck'),
meta:{
showBreadcrumb:true,
title:'账号禁用审核(复审)',
}
}
]
\ No newline at end of file
......@@ -74,7 +74,9 @@ const login = r => require.ensure([],()=>r(require('@/components/end/login')),'l
// 忘记密码
const forgetPassword = r => require.ensure([],()=>r(require('@/components/end/forgetPassword')),'forgetPassword');
// 首页
import { statisticsRoute } from './statistics'
import { systemRoute } from './system'
import { accoutsRoute } from './accout'
const router = new Router({
routes: [
{
......@@ -91,88 +93,9 @@ const router = new Router({
showBreadcrumb:false
}
},
{
path: '/organ',
name: '机构管理',
component: () => import('@/page/system/organ'),
meta:{
showBreadcrumb:true,
title:'机构管理',
}
},
{
path: '/users',
name: '用户管理',
component: () => import('@/page/system/users'),
meta:{
showBreadcrumb:true,
title:'用户管理',
}
},
{
path: '/log',
name: '日志管理',
component: () => import('@/page/system/log'),
meta:{
showBreadcrumb:true,
title:'日志管理',
}
},
{
path: '/unitAdmin',
name: '单位管理员账号管理',
component: () => import('@/page/system/unitAdmin'),
meta:{
showBreadcrumb:true,
title:'单位管理员账号管理',
}
},
{
path: '/edition',
name: 'app版本管理',
component: () => import('@/page/system/edition'),
meta:{
showBreadcrumb:true,
title:'app版本管理',
}
},
{
path: '/changePwd',
name: '修改密码',
component: () => import('@/page/system/changePwd'),
meta:{
showBreadcrumb:true,
title:'修改密码',
}
},
// 统计管理
{
path: '/overview',
name: '统计概览',
component: () => import('@/page/statistics/overview'),
meta:{
showBreadcrumb:true,
title:'统计概览',
}
},
{
path: '/interaction',
name: '互动统计',
component: () => import('@/page/statistics/interaction'),
meta:{
showBreadcrumb:true,
title:'互动统计',
}
},
{
path: '/tend',
name: '趋势分析',
component: () => import('@/page/statistics/tend'),
meta:{
showBreadcrumb:true,
title:'趋势分析',
}
},
...statisticsRoute,
...systemRoute,
...accoutsRoute,
{
path: '/forgetPassword',
name: '忘记密码',
......
// 统计管理
export let statisticsRoute = [
{
path: '/overview',
name: '统计概览',
component: () => import('@/page/statistics/overview'),
meta:{
showBreadcrumb:true,
title:'统计概览',
}
},
{
path: '/interaction',
name: '互动统计',
component: () => import('@/page/statistics/interaction'),
meta:{
showBreadcrumb:true,
title:'互动统计',
}
},
{
path: '/tend',
name: '趋势分析',
component: () => import('@/page/statistics/tend'),
meta:{
showBreadcrumb:true,
title:'趋势分析',
}
}
]
export let systemRoute = [
{
path: '/organ',
name: '机构管理',
component: () => import('@/page/system/organ'),
meta:{
showBreadcrumb:true,
title:'机构管理',
}
},
{
path: '/log',
name: '日志管理',
component: () => import('@/page/system/log'),
meta:{
showBreadcrumb:true,
title:'日志管理',
}
},
{
path: '/changePwd',
name: '修改密码',
component: () => import('@/page/system/changePwd'),
meta:{
showBreadcrumb:true,
title:'修改密码',
}
}
]
\ No newline at end of file
......@@ -14,7 +14,7 @@
.f16{ font-size: 14px; }
.f18{ font-size: 18px; }
.f24{ font-size: 24px; }
.f0{font-size: 0px;}
.inline-block{
display: inline-block;
}
......@@ -266,4 +266,175 @@
}
}
}
// 适用于统计详情样式
.overview-detail{
.ecahrts-panel-box{
height: calc(50% + 20px);
}
.rank-panel-box{
height: calc(50% - 40px);
margin-top: 20px;
}
.ecahrts-panel-box,
.rank-panel-box{
background:@party-white;
box-shadow: 0 4px 8px 0 rgba(221,221,221,0.40);
border-radius: 8px;
}
.panel-box-header{
height: 64px;
line-height: 64px;
border-bottom: 1px solid @party-border-color;
padding: 0 24px;
.title{
font-weight: bold;
font-size: 20px;
}
.tip{
float: right;
color: @font-color;
.tip-title{
font-weight: bold;
padding-right: 10px;
}
}
.el-range-editor.el-input__inner{
width: 280px;
border-radius: 22px;
background-color: @party-bg-gray;
margin-left: 40px;
padding-left:15px;
.el-range-input{
background-color: @party-bg-gray;
}
.el-range-separator{
width: 20px;
padding: 0 2px;
}
.el-icon-date{
color: @party-btn-color;
font-size: 18px;
}
}
}
.panel-box-content{
height: calc(100% - 64px);
overflow: hidden;
}
.rank-box{
width: 50%;
&.left{
padding-right: 10px;
}
&.right{
padding-left: 10px;
}
}
}
.party-icon-20{
display:inline-block;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: cover;
}
.party-icon-24{
display:inline-block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-size: cover;
}
.icon-add{
background-image: url("~@/assets/icons/add.png");
}
.icon-import{
background-image: url("~@/assets/icons/import.png");
}
.icon-edit{
background-image: url("~@/assets/icons/edit.png");
}
.icon-reset{
background-image: url("~@/assets/icons/reset.png");
}
.icon-enable{
background-image: url("~@/assets/icons/enable.png");
}
.icon-disable{
background-image: url("~@/assets/icons/disable.png");
}
.icon-del{
background-image: url("~@/assets/icons/del.png");
}
.icon-org{
display: inline-block;
width: 16px;
height: 16px;
background-repeat: no-repeat;
background-size: cover;
background-image: url("~@/assets/icons/org.png");
margin-right: 8px;
}
// 组织树结构样式
.org-tree{
// expand 三角icon
.el-tree-node__expand-icon{
position: absolute;
right: 10px;
top: 14px;
color: #000000;
font-size: 16px;
&.is-leaf{
color: transparent;
}
}
.el-tree-node{
background-color: @party-white;
}
.el-tree-node__content{
height: auto;
position: relative;
background-color: transparent !important;
&:hover{
background-color: transparent;
}
}
div[class*="tree-node-level"]{
width: 100%;
color: @font-color;
border-radius: 5px;
}
.tree-node-level1,
.tree-node-level2{
span{
font-size: 16px;
}
}
.tree-node-level3{
span{
font-size: 14px;
}
}
.tree-node-level1{
height: 56px;
line-height: 56px;
border-bottom: 1px solid @party-border-color;
}
.tree-node-level2,
.tree-node-level3{
height: 40px;
line-height: 40px;
margin: 5px 0;
border-radius: 20px;
padding-left: 10px;
}
.tree-node-level2:hover{
background-color: @party-table-header-color;
}
.tree-node-level3:hover{
background-color: @party-border-color;
}
}
\ No newline at end of file
.party-table{
height: calc(100% - 130px);
&.noAdd{
height: calc(100% - 100px);
}
.el-table__header-wrapper{
border-radius: 8px 8px 0 0 ;
.el-table__header{
......@@ -11,10 +14,58 @@
}
}
.el-table__body{
color: @font-color;
tr{
&:nth-child(even){
background-color: #FDFBF8;
}
}
}
}
.table-btn-group{
.el-button{
border: none;
padding: 0;
}
}
.icon-table{
display: inline-block;
width: 24px;
height: 24px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.passed,
.rejected{
width: 80px;
height: 28px;
border-radius: 28px;
font-size: 16px;
&.is-disabled{
background: rgba(0,0,0,0.10);
color: #999999;
&:hover{
background: rgba(0,0,0,0.10);
color: #999999;
}
}
}
.passed{
background-color: #F4EDE3;
color: @party-btn-color;
&:hover{
background-color: #F4EDE3;
color: @party-btn-color;
}
}
.rejected{
background: rgba(155,30,35,0.10);
color: @party-red;
&:hover{
background: rgba(155,30,35,0.10);
color: @party-red;
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment