Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
1b95b632 by 任超
Options

feat:打包分支代码提交

2 parents 856df1c5 eb85698e
Expand all
Inline Side-by-side
Showing 144 changed files with 2987 additions and 1068 deletions
......@@ -21,6 +21,4 @@ yarn-error.log*
*.njsproj
*.sln
*.sw?
/src/api/config.js
package-lock.json
......
......@@ -11,10 +11,11 @@
"@jiaminghi/data-view": "^2.10.0",
"axios": "^0.21.1",
"clipboard": "^2.0.11",
"jsoneditor": "^9.9.2",
"core-js": "^3.6.5",
"echarts": "^4.6.0",
"file-saver": "^2.0.5",
"js-cookie": "2.2.0",
"jsoneditor": "^9.9.2",
"lodash": "^4.17.21",
"node-sass": "^4.14.1",
"normalize.css": "7.0.0",
......@@ -24,7 +25,9 @@
"vue-json-editor": "^1.4.3",
"vue-router": "3.0.2",
"vuex": "3.1.0",
"xe-utils": "^3.5.7"
"xe-utils": "^3.5.7",
"xlsx": "^0.17.0",
"xlsx-style": "^0.8.13"
},
"devDependencies": {
"@vue/cli-plugin-babel": "4.4.4",
......
import request from "@/utils/request";
import SERVER from "./config";
import { getParams } from './util'
import {
api,
getAction,
postAction,
deleteAction,
putAction
} from './manageApi'
/** 角色管理开始 */
// 获取角色列表 categoryId
// 获取角色列表 by categoryId
export const getRolesById = categoryId => {
const conditionGroup = {
conditions: [
{
property: 'category',
value:categoryId,
value: categoryId,
operator: 'EQ'
}
],
queryRelation: 'AND'
}
const params = getParams(conditionGroup);
const params = getParams(conditionGroup)
return getAction(api.roles, params)
}
// 人员列表
export const getUserRoles = (id) => {
return getAction(`${api.userRoles}/${id}/users`)
}
// 更新人员
export const updateUser = (id, data) => {
return putAction(`${api.userRoles}/${id}/users`, data)
}
// 根据条件获取用户
export const getUserList = (params) => {
return getAction(api.users, params)
}
// 导出用户列表
export const exportUserList = (params) => {
return getAction(api.users + '/export', params)
/** 角色管理结束 */
/** 授权管理开始 */
// 获取权限列表
export const getAuthorityListAction = (productId, subsystemCode) => {
const conditionGroup = {
conditions: [
{
property: 'productId',
value: productId,
operator: 'EQ'
},
{
property: 'code',
value: subsystemCode + '_MENU',
operator: 'EQ'
}
],
queryRelation: 'AND'
}
const params = getParams(conditionGroup)
return getAction(api.resourceCategory, params)
}
// 更新用户状态
export const updateStatus = (id, status) => {
return putAction(`${api.users}/${id}/${status}/status`)
/**
* 获取角色的权限 id operationCodes resourceCategoryCode
* id 授权id
* operationCodes 操作符集合
* resourceCategoryCode 菜单默认MENU
*/
export const getRoleAuthorityList = (
id,
operationCodes,
resourceCategoryCode
) => {
return getAction(`${api.rolePermissions}/${id}`, {
operationCodes: operationCodes,
resourceCategoryCode: resourceCategoryCode
})
}
// 更新用户解锁状态
export const updateLock = (id) => {
return putAction(`${api.users}/${id}/lock`)
// 角色授权
export const roleAuthority = (id, permissionDtos) => {
return putAction(`${api.rolePermissions}/${id}`, permissionDtos)
}
// 重置用户密码
// export const resetPassword = id => {
// return putAction(`${api.users}/${id}/reset-password`)
// }
// 重置用户密码
export const resetPassword = (ids) => {
return putAction(`${api.users}/reset-passwords?ids=${ids}`)
}
// 删除人员
export const delUser = (id, data) => {
return deleteAction(`${api.userRoles}/${id}/users`, data)
}
// 获取父级菜单
export const getParentMenuListAction = (id) => {
let conditionGroup = {}
......@@ -81,3 +86,4 @@ export const getParentMenuListAction = (id) => {
const params = getParams(conditionGroup)
return getAction(api.menus, params)
}
......
/*
* @Description: 统计率
* @Autor: renchao
* @LastEditTime: 2023-03-01 15:37:49
*/
/* 引入请求文件 */
import request from '@/utils/request'
/* 引入配置文件 */
import SERVER from './config'
class business {
/*
成功率统计
startDate:开始日期
endDate:结束日期
*/
async getSuucessRate(startDate,endDate,qxdm) {
/**
* @description: 成功率统计
* @param {*} startDate
* @param {*} endDate
* @param {*} qxdm
* @author: renchao
*/
async getSuucessRate (startDate, endDate, qxdm) {
return request({
url: SERVER.SERVERAPI + '/rest/statistics/Business/sf',
method: 'get',
params: {
startDate:startDate,
endDate:endDate,
qxdm:qxdm
startDate: startDate,
endDate: endDate,
qxdm: qxdm
}
})
}
......
/*
* @Description: 这个是所有api的前缀配置文件
* @Autor: renchao
* @LastEditTime: 2023-03-01 15:35:44
*/
export default {
// SERVERAPI: '/service-bdcsjsb-th', //浩浩
// SERVERAPI: '/service-bdcsjsb-zz',
SERVERAPI: '/bdcsjsb', //赵千
MANAGEMENTAPI: 'http://192.168.2.236/management'
// SERVERAPI: '/bdcsjsb-service'
// SERVERAPI: '/bdcsjsb-jiao0'
}
// 汉中
// export default {
// // SERVERAPI: '/service-bdcsjsb-th', //线上
// SERVERAPI: '/bdcsjsb', //赵千
// MANAGEMENTAPI: 'http://172.16.56.32:8877/management'
// }
/*
* @Description: 数据上报模块api文件
* @Autor: renchao
* @LastEditTime: 2023-03-03 14:38:57
*/
/* 引入axios请求文件 */
import request from '@/utils/request'
/* 引入配置 */
import SERVER from './config'
const urlHeader = SERVER.SERVERAPI + '/rest/sjsb/DataReport/'
// 区县上报分页
/**
* @description: 区县上报根据业务id获取xml
* @param {*} bizMsgid
* @author: renchao
*/
export function getXml (bizMsgid) {
return request({
url: SERVER.SERVERAPI + '/rest/sjsb/DataReport/getXml',
url: urlHeader + 'getXml',
method: 'get',
params: {
businessId: bizMsgid
......@@ -12,58 +24,102 @@ export function getXml (bizMsgid) {
})
}
// 区县上报分页
/**
* @description: 区县上报分页
* @param {*} data
* @author: renchao
*/
export function getAreaReportPage (data) {
return request({
url: SERVER.SERVERAPI + '/rest/sjsb/DataReport/getAreaReportPage',
url: urlHeader + 'getAreaReportPage',
method: 'post',
data
})
}
// 接入数据上报分页
/**
* @description: 接入数据上报分页
* @author: renchao
*/
export function getReceiveDataReportPage (data) {
return request({
url: SERVER.SERVERAPI + '/rest/sjsb/DataReport/getReceiveDataReportPage',
url: urlHeader + 'getReceiveDataReportPage',
method: 'post',
data
})
}
// 数据上报分页
/**
* @description: 数据上报分页
* @author: renchao
*/
export function getDataReportPage (data) {
return request({
url: SERVER.SERVERAPI + '/rest/sjsb/DataReport/getDataReportPage',
url: urlHeader + 'getDataReportPage',
method: 'post',
data
})
}
// 查询数据上报详情tabs选项卡
/**
* @description: 查询数据上报详情tabs选项卡
* @author: renchao
*/
export function getTabsDetail (params) {
return request({
url: SERVER.SERVERAPI + '/rest/sjsb/DataReport/getTabsDetail',
url: urlHeader + 'getTabsDetail',
method: 'get',
params
})
}
// 查询数据上报详情
/**
* @description: 查询数据上报详情
* @author: renchao
*/
export function getReportDetail (params) {
return request({
url: SERVER.SERVERAPI + '/rest/sjsb/DataReport/getReportDetail',
url: urlHeader + 'getReportDetail',
method: 'get',
params
})
}
// 结果
/**
* @description: 获取数据上报结果
* @param {*} bsmReport
* @author: renchao
*/
export function getReceiveDataReportResult (bsmReport) {
return request({
url: SERVER.SERVERAPI + '/rest/sjsb/DataReport/getReceiveDataReportResult',
url: urlHeader + 'getReceiveDataReportResult',
method: 'get',
params: {
bsmReport: bsmReport
}
})
}
/**
* @description: 重新上报
* @param {*} bsmReport
* @author: renchao
*/
export function restartGenerateXml (bsmReport) {
return request({
url: urlHeader + 'restartGenerateXml?bsmReport=' + bsmReport,
method: 'post'
})
}
/**
* @description: 编辑报文头
* @param {*} data
* @author: renchao
*/
export function edit (data) {
return request({
url: urlHeader + 'edit',
method: 'post',
data
})
}
\ No newline at end of file
......
......@@ -78,12 +78,12 @@ export const api = {
crudPut: crud + '/rest/put', // crudPut
crudDel: crud + '/rest/delete', // crudDel
crudMetadata: crud + '/rest/metadata', //crudMetadata
crudBusiness : crud + '/rest/business', // crudBusiness
crudDatasources : crud + '/rest/datasources', // crudDatasources
crudBusiness: crud + '/rest/business', // crudBusiness
crudDatasources: crud + '/rest/datasources', // crudDatasources
}
// 根据code获取字典 params={isTree:true})
export function getDictItems(code, params = {}) {
export function getDictItems (code, params = {}) {
return request({
url: `${api.baseDataCategory}/${code}/base-datas`,
method: 'get',
......@@ -91,21 +91,21 @@ export function getDictItems(code, params = {}) {
})
}
// 获取一级字典值下级接口
export function getDictItemsChild(id) {
export function getDictItemsChild (id) {
return request({
url: `${api.baseData}/dict/${id}`,
method: 'get'
})
}
// 获取传入字段的所有级别字典值
export function getAllDictItems(name) {
export function getAllDictItems (name) {
return request({
url: `${api.baseDataCategory}/${name}/base-datas`,
method: 'get'
})
}
// get公共方法
export function getAction(url, params = {}) {
export function getAction (url, params = {}) {
return request({
url,
method: 'get',
......@@ -113,7 +113,7 @@ export function getAction(url, params = {}) {
})
}
// post公共方法
export function postAction(url, data = null) {
export function postAction (url, data = null) {
return request({
url,
method: 'post',
......@@ -121,7 +121,7 @@ export function postAction(url, data = null) {
})
}
// method= {post | put}
export function httpAction(url, data, method) {
export function httpAction (url, data, method) {
return request({
url,
method,
......@@ -129,7 +129,7 @@ export function httpAction(url, data, method) {
})
}
// put公共方法
export function putAction(url, data = null) {
export function putAction (url, data = null) {
return request({
url,
method: 'put',
......@@ -137,7 +137,7 @@ export function putAction(url, data = null) {
})
}
// delete
export function deleteAction(url, data = null) {
export function deleteAction (url, data = null) {
return request({
url,
method: 'delete',
......@@ -146,7 +146,7 @@ export function deleteAction(url, data = null) {
}
// 批量删除
export function deleteBranch(url, data) {
export function deleteBranch (url, data) {
return request({
url,
method: 'delete',
......
import {
api,
getAction,
deleteAction,
putAction
} from './manageApi'
export const updateUserPassword = (data) => {
return putAction(`${api.users}/update-password`, data)
}
// 根据条件获取用户
export const getUserList = (params) => {
return getAction(api.users, params)
}
// 重置用户密码
// export const resetPassword = id => {
// return putAction(`${api.users}/${id}/reset-password`)
// }
// 重置用户密码
export const resetPassword = (ids) => {
return putAction(`${api.users}/reset-passwords?ids=${ids}`)
}
// 人员列表
export const getUserRoles = (id) => {
return getAction(`${api.userRoles}/${id}/users`)
}
// 更新人员
export const updateUser = (id, data) => {
return putAction(`${api.userRoles}/${id}/users`, data)
}
/*
* @Description: 登薄日志
* @Autor: renchao
* @LastEditTime: 2023-03-02 13:45:53
*/
/* 引入请求文件 */
import request from '@/utils/request'
/* 引入配置文件 */
import SERVER from './config'
// 登簿日志分页
const urlHeader = SERVER.SERVERAPI + '/rest/sjsb/RecordLog/'
/**
* @description: 登簿日志分页
* @author: renchao
*/
export function getRecordLogPage (data) {
return request({
url: SERVER.SERVERAPI + '/rest/sjsb/RecordLog/getRecordLogPage',
url: urlHeader + 'getRecordLogPage',
method: 'post',
data
})
}
/**
* @description: 获取详情明细
* @param {*} dbBsm
* @author: renchao
*/
export function getDetail (dbBsm) {
return request({
url: urlHeader + 'getDetail',
method: 'get',
params: {
dbBsm: dbBsm
}
})
}
/**
* @description: 详情页面编辑
* @param {*} data
* @author: renchao
*/
export function edit (data) {
return request({
url: urlHeader + 'edit',
method: 'post',
data
})
}
/**
* @description: 登薄日志重新生成报文
* @param {*} dbBsm
* @author: renchao
*/
export function regenerateDbXml (dbBsm) {
return request({
url: urlHeader + 'regenerateDbXml',
method: 'get',
params: {
dbBsm: dbBsm
}
})
}
......
/*
* @Author: yangwei
* @Date: 2023-03-09 09:29:52
* @LastEditors: yangwei
* @LastEditTime: 2023-03-09 10:31:31
* @FilePath: \bdcjg-web\src\api\statistics.js
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
*/
import request from '@/utils/request'
import SERVER from './config'
const url = SERVER.SERVERAPI + '/rest/statistics/Efficient/'
/**
* dataReceiveQuality
* @param startDate
* @param endDate
* @returns {AxiosPromise}
*/
export function dataReceiveQuality (startDate, endDate) {
return request({
url: url + 'dataReceiveQuality?startDate='+startDate+'&endDate='+endDate,
method: 'post'
})
}
/**
* 空项率统计
* @returns {AxiosPromise}
* @param startDate
* @param endDate
*/
export function nonNullSta (startDate, endDate) {
return request({
url: url + 'nonNullSta?startDate='+startDate+'&endDate='+endDate,
method: 'post'
})
}
/**
* 登簿质量统计
* @returns {AxiosPromise}
* @param startDate
* @param endDate
*/
export function registerBookQuality (startDate, endDate) {
return request({
url: url + 'registerBookQuality?startDate='+startDate+'&endDate='+endDate,
method: 'post'
})
}
......@@ -8,10 +8,21 @@ export function getUserInfo () {
})
}
// // 获取菜单信息
// export function getMenuInfo () {
// return request({
// url: SERVER.SERVERAPI + '/rest/user/getUserAuthorizationMenus',
// method: 'get',
// })
// }
// 获取菜单信息
export function getMenuInfo () {
export function getMenuInfo (data) {
return request({
url: SERVER.SERVERAPI + '/rest/user/getUserAuthorizationMenus',
method: 'get',
params: {
productCode: data,
},
})
}
\ No newline at end of file
}
......
......@@ -4,8 +4,7 @@
<script>
import tdTheme from "./theme.json"; // 引入默认主题
import "../map/hanzhong.js";
import { mapGetters } from "vuex";
export default {
name: "echart",
props: {
......@@ -30,14 +29,14 @@ export default {
default: () => ({}),
},
},
data() {
data () {
return {
chart: null,
};
},
watch: {
options: {
handler(options) {
handler (options) {
// 设置true清空echart缓存
this.chart.setOption(options, true);
window.addEventListener("resize", () => {
......@@ -46,22 +45,33 @@ export default {
}
});
},
deep: true,
deep: true
},
},
computed: {
...mapGetters(["dicData"]),
logoName () {
return (
this.dicData["sysCode"] &&
this.dicData["sysCode"].filter((item) => item.DCODE == "areaMap")
);
},
},
mounted() {
mounted () {
this.$echarts.registerTheme("tdTheme", tdTheme); // 覆盖默认主题
this.initChart();
this.$nextTick(() => {
this.initChart();
})
},
beforeDestroy() {
this.chart.dispose();
beforeDestroy () {
// this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
initChart () {
// 初始化echart
this.chart = this.$echarts.init(this.$el, "tdTheme");
function nowSize(val, initWidth = 1920) {
function nowSize (val, initWidth = 1920) {
return val * (nowClientWidth / initWidth);
}
this.chart.setOption(this.options, true);
......
......@@ -2,7 +2,7 @@
<div class="naturalBuilding itemForm">
<el-form :model="naturalForm" :rules="rules" ref="formList" label-width="115px" :key="key">
<div v-for="(item, index) in naturalForm.naturalList" :key="index" class="naturalBuilding-item">
<p class="naturalBuilding-name">自然幢{{ index + 1 }}</p>
<p class="naturalBuilding-name obligee-item-name">自然幢{{ index + 1 }}</p>
<div class="naturalBuilding-list">
<el-row>
<el-col :span="8">
......@@ -330,7 +330,7 @@ export default {
default: "",
},
},
data() {
data () {
return {
naturalForm: {
naturalList: [
......@@ -366,7 +366,7 @@ export default {
};
},
methods: {
async featchData() {
async featchData () {
try {
let { result: res } = await kttFwZrz.getKttFwZrzById(this.bsmSjsb);
this.naturalForm.naturalList = res;
......@@ -375,7 +375,7 @@ export default {
this.$refs.msg.messageShow();
}
},
handleUpdateForm() {
handleUpdateForm () {
return new Promise(async (resolve) => {
try {
let res = await kttFwZrz.updateKttFwZrz(this.naturalForm.naturalList);
......
/*
* FileName: lb-column.vue
* Remark: element-column
* Project: lb-element-table
* Author: 任超
* File Created: Tuesday, 19th March 2019 9:58:23 am
* Last Modified: Tuesday, 19th March 2019 10:14:42 am
* Modified By: 任超
*/
<template>
<el-table-column v-bind="$attrs" v-on="$listeners" :prop="column.prop" :label="column.label" :type="column.type"
:index="column.index" :column-key="column.columnKey" :width="column.width" :min-width="column.minWidth"
:fixed="column.fixed" :scoped-slot="column.renderHeader" :sortable="column.sortable || false"
:sort-method="column.sortMethod" :sort-by="column.sortBy" :sort-orders="column.sortOrders"
:resizable="column.resizable || true" :formatter="column.formatter"
:show-overflow-tooltip="column.showOverflowTooltip || false" :align="column.align || align || 'center'"
:header-align="column.headerAlign || headerAlign || column.align || align || 'center'"
:class-name="column.className" :label-class-name="column.labelClassName" :selectable="column.selectable"
:reserve-selection="column.reserveSelection || false" :filters="column.filters"
:filter-placement="column.filterPlacement" :filter-multiple="column.filterMultiple"
:filter-method="column.filterMethod" :filtered-value="column.filteredValue">
<template slot="header" slot-scope="scope">
<lb-render v-if="column.renderHeader" :scope="scope" :render="column.renderHeader">
</lb-render>
<span v-else>{{ scope.column.label }}</span>
</template>
<template slot-scope="scope">
<lb-render :scope="scope" :render="column.render">
</lb-render>
</template>
<template v-if="column.children">
<lb-column v-for="(col, index) in column.children" :key="index" :column="col">
</lb-column>
</template>
</el-table-column>
</template>
<script>
import LbRender from './LbRender'
import forced from './forced.js'
export default {
name: 'LbColumn',
props: {
column: Object,
headerAlign: String,
align: String
},
components: {
LbRender
},
methods: {
setColumn () {
if (this.column.type) {
this.column.renderHeader = forced[this.column.type].renderHeader
this.column.render = this.column.render || forced[this.column.type].renderCell
}
if (this.column.formatter) {
this.column.render = (h, scope) => {
return <span>{scope.column.formatter(scope.row, scope.column, scope.row, scope.$index)}</span>
}
}
if (!this.column.render) {
this.column.render = (h, scope) => {
return <span>{scope.row[scope.column.property]}</span>
}
}
}
},
watch: {
column: {
handler () {
this.setColumn()
},
immediate: true
}
}
}
</script>
/*
* FileName: lb-render.vue
* Remark: 自定义render
* Project: lb-element-table
* Author: 任超
* File Created: Tuesday, 19th March 2019 10:15:30 am
* Last Modified: Tuesday, 19th March 2019 10:15:32 am
* Modified By: 任超
*/
<script>
export default {
name: 'LbRender',
functional: true,
props: {
scope: Object,
render: Function
},
render: (h, ctx) => {
return ctx.props.render ? ctx.props.render(h, ctx.props.scope) : ''
}
}
</script>
export default {
selection: {
renderHeader: (h, { store }) => {
return (
<el-checkbox
disabled={store.states.data && store.states.data.length === 0}
indeterminate={
store.states.selection.length > 0 && !store.states.isAllSelected
}
nativeOn-click={store.toggleAllSelection}
value={store.states.isAllSelected}
/>
)
},
renderCell: (h, { row, column, store, $index }) => {
return (
<el-checkbox
nativeOn-click={event => event.stopPropagation()}
value={store.isSelected(row)}
disabled={
column.selectable
? !column.selectable.call(null, row, $index)
: false
}
on-input={() => {
store.commit('rowSelectedChanged', row)
}}
/>
)
},
sortable: false,
resizable: false
},
index: {
renderHeader: (h, scope) => {
return <span>{scope.column.label || '#'}</span>
},
renderCell: (h, { $index, column }) => {
let i = $index + 1
const index = column.index
if (typeof index === 'number') {
i = $index + index
} else if (typeof index === 'function') {
i = index($index)
}
return <div>{i}</div>
},
sortable: false
},
expand: {
renderHeader: (h, scope) => {
return <span>{scope.column.label || ''}</span>
},
renderCell: (h, { row, store }, proxy) => {
const expanded = store.states.expandRows.indexOf(row) > -1
return (
<div
class={
'el-table__expand-icon ' +
(expanded ? 'el-table__expand-icon--expanded' : '')
}
on-click={e => proxy.handleExpandClick(row, e)}
>
<i class='el-icon el-icon-arrow-right' />
</div>
)
},
sortable: false,
resizable: false,
className: 'el-table__expand-column'
}
}
/*
* FileName: lb-table.vue
* Remark: element table
* Project: lb-element-table
* Author: 任超
* File Created: Tuesday, 19th March 2019 9:55:27 am
* Last Modified: Tuesday, 19th March 2019 9:55:34 am
* Modified By: 任超
*/
<template>
<div :class="['lb-table', customClass]">
<el-table v-if="!heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }" ref="elTable" :border='border'
:row-class-name="tableRowClassName" :show-header='showHeader' @row-click="singleElection" v-bind="$attrs"
:height="tableHeight" v-on="$listeners" :data="data" style="width: 100%"
:span-method="this.merge ? this.mergeMethod : this.spanMethod">
<el-table-column width="45" align="center" v-if="isRadio">
<template slot-scope="scope">
<el-radio v-model="selected" :label="scope.$index"></el-radio>
</template>
</el-table-column>
<el-table-column :label="downTitle" align="center">
<lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
</lb-column>
</el-table-column>
</el-table>
<br>
<el-pagination class="lb-table-pagination" v-if="pagination" v-bind="$attrs" v-on="$listeners" background
layout="total, prev, pager, next" @current-change="paginationCurrentChange"
:style="{ 'margin-top': paginationTop, 'text-align': paginationAlign }">
</el-pagination>
</div>
</template>
<script>
import LbColumn from './LbColumn'
export default {
props: {
column: Array,
data: Array,
spanMethod: Function,
pagination: {
type: Boolean,
default: true,
},
downExcel: {
type: Boolean,
default: false,
},
downTitle: {
type: String,
default: '标题'
},
isRadio: {
type: Boolean,
default: false,
},
border: {
type: Boolean,
default: false,
},
showHeader: {
type: Boolean,
default: true,
},
paginationTop: {
type: String,
default: '0',
},
heightNum: {
type: Number,
default: 355,
},
maxHeight: {
type: Number,
default: 500
},
heightNumSetting: {
type: Boolean,
default: false,
},
customClass: {
type: String,
default: '',
},
paginationAlign: {
type: String,
default: 'left',
},
merge: Array,
},
components: {
LbColumn,
},
data () {
return {
tableHeight: 'auto',
mergeLine: {},
mergeIndex: {},
selected: ''
}
},
created () {
this.getMergeArr(this.data, this.merge)
this.getHeight()
},
computed: {
dataLength () {
return [] || this.data.length
},
},
methods: {
// 单选
singleElection (row) {
this.selected = this.data.indexOf(row);
},
tableRowClassName ({ row, rowIndex }) {
if (rowIndex % 2 === 1) {
return 'interlaced';
}
},
getHeight () {
if (!this.heightNumSetting) {
let _this = this
if (this.heightNum) {
_this.$nextTick(() => {
window.addEventListener('resize', () => {
_this.tableHeight = _this.calcHeightx(230)
});
_this.tableHeight = _this.calcHeightx(230)
})
} else {
_this.tableHeight = window.innerHeight - _this.heightNum
}
}
},
calcHeightx (value, wappered = true) {
//项目自定义的公共header部分的高度，可忽略
let header = document.querySelector(".from-clues-header").offsetHeight;
//value为动态计算table界面高度时，减去的其他空白部分，需自行在调试找到临界值，剩下的就是table表格的高度（包含header+body部分）
value = value == undefined ? 100 : value;
let res = window.innerHeight - parseInt(header) - value;
if (wappered) {
//通过原生方法，获取dom节点的高度------获取element-ui table表格body的元素
let wapper = window.document.getElementsByClassName('el-table__body-wrapper');
//通过原生方法，获取dom节点的高度------获取element-ui table表格header的元素
let header = window.document.getElementsByClassName('el-table__header-wrapper');
//必须加延时，要不然赋不上去值
setTimeout(() => {
//通过上边计算得到的table高度的value值，减去table表格的header高度，剩下的通过dom节点直接强行赋给table表格的body
wapper[0].style.height = (value - header[0].clientHeight)
}, 100)
}
return res;
},
clearSelection () {
this.$refs.elTable.clearSelection()
},
toggleRowSelection (row, selected) {
this.$refs.elTable.toggleRowSelection(row, selected)
},
toggleAllSelection () {
this.$refs.elTable.toggleAllSelection()
},
toggleRowExpansion (row, expanded) {
this.$refs.elTable.toggleRowExpansion(row, expanded)
},
setCurrentRow (row) {
this.$refs.elTable.setCurrentRow(row)
},
clearSort () {
this.$refs.elTable.clearSort()
},
clearFilter (columnKey) {
this.$refs.elTable.clearFilter(columnKey)
},
doLayout () {
this.$refs.elTable.doLayout()
},
sort (prop, order) {
this.$refs.elTable.sort(prop, order)
},
paginationCurrentChange (val) {
this.$emit('p-current-change', val)
},
getMergeArr (tableData, merge) {
if (!merge) return
this.mergeLine = {}
this.mergeIndex = {}
merge.forEach((item, k) => {
tableData.forEach((data, i) => {
if (i === 0) {
this.mergeIndex[item] = this.mergeIndex[item] || []
this.mergeIndex[item].push(1)
this.mergeLine[item] = 0
} else {
if (data[item] === tableData[i - 1][item]) {
this.mergeIndex[item][this.mergeLine[item]] += 1
this.mergeIndex[item].push(0)
} else {
this.mergeIndex[item].push(1)
this.mergeLine[item] = i
}
}
})
})
},
mergeMethod ({ row, column, rowIndex, columnIndex }) {
const index = this.merge.indexOf(column.property)
if (index > -1) {
const _row = this.mergeIndex[this.merge[index]][rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col,
}
}
},
},
watch: {
merge () {
this.getMergeArr(this.data, this.merge)
},
dataLength () {
this.getMergeArr(this.data, this.merge)
}
},
}
</script>
<style rel="stylesheet/scss" scoped lang="scss">
.lb-table {
margin-top: 1px;
.interlaced {
background: #fafcff;
border: 1px solid #ebf2fa;
}
}
/deep/.el-table .cell {
padding-left: 3px;
padding-right: 3px;
}
/deep/.el-radio__label {
display: none;
}
</style>
## 这是对于element-table 进行的二次封装
### 文档地址
<!-- table 已经全局注册不需要每个页面单独注册 -->
[Windows/Mac/Linux 全平台客户端](https://github.liubing.me/lb-element-table/zh/guide/)
<template>
<!--上报统计柱状图 -->
<!--上报统计柱状图 -->
<Echart
:options="options"
id="bottomLeftChart"
height="100%"
width="100%"
></Echart>
width="100%"></Echart>
</template>
<script>
import Echart from "@/common/echart";
export default {
data() {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({}),
import Echart from "@/common/echart";
export default {
data () {
return {
options: {},
};
},
},
watch: {
cdata: {
handler(newData) {
this.options = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
left: "5%",
right: "8%",
bottom: "5%",
containLabel: true,
},
xAxis: {
type: "value",
splitLine: { show: false },
axisTick: { show: false },
axisLine: {
show: true,
lineStyle: {
color: "#01F3F5",
},
},
axisLabel: {
show: true,
textStyle: {
color: "#01F3F5",
fontSize: 12,
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({}),
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
},
yAxis: {
type: "category",
data: newData.category,
axisLine: {
show: true,
lineStyle: {
color: "#01F3F5",
},
grid: {
left: "5%",
right: "8%",
bottom: "5%",
containLabel: true,
},
},
series: [
{
name: "成功",
type: "bar",
stack: "总量",
barWidth: 18,
label: {
xAxis: {
type: "value",
splitLine: { show: false },
axisTick: { show: false },
axisLine: {
show: true,
formatter: function (params) {
if (params.value > 0) {
return params.value;
} else {
return '';
}
}
lineStyle: {
color: "#01F3F5",
},
},
itemStyle: {
normal: {
color: "#5fba7d",
axisLabel: {
show: true,
textStyle: {
color: "#01F3F5",
fontSize: 12,
},
},
data: newData.barData,
},
{
name: "失败",
type: "bar",
stack: "总量",
label: {
yAxis: {
type: "category",
data: newData.category,
axisLine: {
show: true,
formatter: function (params) {
if (params.value > 0) {
return params.value;
} else {
return '';
}
}
lineStyle: {
color: "#01F3F5",
},
},
},
series: [
{
name: "成功",
type: "bar",
stack: "总量",
barWidth: 18,
label: {
show: true,
formatter: function (params) {
if (params.value > 0) {
return params.value;
} else {
return '';
}
}
},
itemStyle: {
normal: {
color: "#5fba7d",
},
},
data: newData.barData,
},
itemStyle: {
normal: {
// 这里设置圆角
color: "#c97168",
{
name: "失败",
type: "bar",
stack: "总量",
label: {
show: true,
formatter: function (params) {
if (params.value > 0) {
return params.value;
} else {
return '';
}
}
},
itemStyle: {
normal: {
// 这里设置圆角
color: "#c97168",
},
},
data: newData.lineData,
},
data: newData.lineData,
},
],
};
],
};
},
immediate: true,
deep: true,
},
immediate: true,
deep: true,
},
},
};
};
</script>
......
......@@ -3,47 +3,47 @@
</template>
<script>
import Chart from "./Chart";
import work from "@/api/work";
export default {
data() {
return {
cdata: {
category: [],
lineData: [],
barData: [],
},
};
},
components: {
Chart,
},
mounted() {
window.addEventListener("resize", () => {
import Chart from "./Chart";
import work from "@/api/work";
export default {
data () {
return {
cdata: {
category: [],
lineData: [],
barData: [],
},
};
},
components: {
Chart,
},
mounted () {
window.addEventListener("resize", () => {
this.submitViews();
});
this.submitViews();
});
this.submitViews();
},
methods: {
async submitViews() {
try {
let { result: res } = await work.submitViews("A20");
this.cdata.category = [];
this.cdata.barData = [];
this.cdata.lineData = [];
res.map((item) => {
return (
this.cdata.category.push(item.areaName),
this.cdata.barData.push(item.successCount),
this.cdata.lineData.push(item.failureCount)
);
});
} catch (error) {
// this.$refs.msg.messageShow();
}
},
},
};
methods: {
async submitViews () {
try {
let { result: res } = await work.submitViews("A20");
this.cdata.category = [];
this.cdata.barData = [];
this.cdata.lineData = [];
res.map((item) => {
return (
this.cdata.category.push(item.areaName),
this.cdata.barData.push(item.successCount),
this.cdata.lineData.push(item.failureCount)
);
});
} catch (error) {
// this.$refs.msg.messageShow();
}
},
},
};
</script>
<style lang="scss" scoped></style>
......
<template>
<!--登记类型总量柱状图 -->
<Echart :options="options" id="bottomLeftChart" height="100%" width="100%" class="" ></Echart>
<Echart :options="options" id="bottomLeftChart" height="100%" width="100%" class=""></Echart>
</template>
<script>
import Echart from "@/common/echart";
export default {
data () {
return {
options: {},
};
},
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({}),
import Echart from "@/common/echart";
export default {
data () {
return {
options: {},
};
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
grid: {
// 让图表占满容器
top: "20%",
left: "10%",
right: "5%",
bottom: "16%",
},
xAxis: {
data: newData.category,
axisLabel: {
show: true,
color: "#ffff",
components: {
Echart,
},
props: {
cdata: {
type: Object,
default: () => ({}),
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
grid: {
// 让图表占满容器
top: "20%",
left: "12%",
right: "5%",
bottom: "16%",
},
xAxis: {
data: newData.category,
axisLabel: {
show: true,
color: "#ffff",
textStyle: {
fontWeight: "normal",
fontSize: "8",
},
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(95, 180, 237, 0.32)",
},
}
},
yAxis: {
splitLine: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(95, 180, 237, 0.32)",
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(95, 180, 237, 0.32)",
},
}
},
axisTick: {
show: false,
},
axisLabel: {
color: "#ffff",
},
},
series: [
{
// 顶部圆片
type: "pictorialBar",
animation: false,
itemStyle: {
color: "rgba(115, 240, 252, 1)",
yAxis: {
splitLine: {
show: false,
},
symbolRepeat: false,
symbolSize: [15, 8],
symbolMargin: 1,
z: 10,
data: newData.lineData,
symbolPosition: "end",
symbolOffset: [0, -4],
},
{
// 底部圆片
type: "pictorialBar",
animation: false,
itemStyle: {
color: "rgba(50, 96, 225, 0.8)",
axisLine: {
show: true,
lineStyle: {
color: "rgba(95, 180, 237, 0.32)",
},
},
axisTick: {
show: false,
},
axisLabel: {
color: "#ffff",
},
symbolRepeat: false,
symbolSize: [15, 8],
symbolMargin: 1,
z: 10,
data: newData.lineData,
symbolPosition: "start",
symbolOffset: [0, 3],
},
{
barWidth: 15,
animation: false,
series: [
{
// 顶部圆片
type: "pictorialBar",
animation: false,
itemStyle: {
color: "rgba(115, 240, 252, 1)",
},
symbolRepeat: false,
symbolSize: [15, 8],
symbolMargin: 1,
z: 10,
data: newData.lineData,
symbolPosition: "end",
symbolOffset: [0, -4],
},
{
// 底部圆片
type: "pictorialBar",
animation: false,
type: "bar",
label: {
show: true,
position: "top",
textStyle: {
color: "#ffff",
itemStyle: {
color: "rgba(50, 96, 225, 0.8)",
},
symbolRepeat: false,
symbolSize: [15, 8],
symbolMargin: 1,
z: 10,
data: newData.lineData,
symbolPosition: "start",
symbolOffset: [0, 3],
},
itemStyle: {
color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: "rgba(82, 180, 249, 0.35)" },
{ offset: 0, color: "rgba(82, 180, 249, 1)" },
]),
{
barWidth: 15,
animation: false,
type: "bar",
label: {
show: true,
position: "top",
textStyle: {
color: "#ffff",
},
},
itemStyle: {
color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 1, color: "rgba(82, 180, 249, 0.35)" },
{ offset: 0, color: "rgba(82, 180, 249, 1)" },
]),
},
data: newData.lineData,
},
data: newData.lineData,
},
],
}
],
}
},
immediate: true,
deep: true,
},
immediate: true,
deep: true,
},
},
};
};
</script>
......
......@@ -4,75 +4,77 @@
id="centreLeft1Chart"
:key="key"
height="1.0417rem"
width="80%"
></Echart>
width="80%"></Echart>
</template>
<script>
import Echart from "@/common/echart";
export default {
components: {
Echart,
},
data() {
return {
key: 0,
};
},
props: {
cdata: {
type: Object,
default: () => ({}),
import Echart from "@/common/echart";
export default {
components: {
Echart,
},
},
watch: {
cdata: {
handler(newData) {
data () {
return {
key: 0,
};
},
props: {
cdata: {
type: Object,
default: () => ({}),
},
},
watch: {
cdata: {
handler (newData) {
this.options = {
color: [
"#37a2da",
"#32c5e9",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#8378ea",
"#fb7293",
"#e7bcf3",
this.options = {
color: [
"#37a2da",
"#32c5e9",
"#9fe6b8",
"#ffdb5c",
"#ff9f7f",
"#8378ea",
"#fb7293",
"#e7bcf3",
],
series: [
{
name: "Access From",
type: "pie",
radius: ["54%", "70%"],
avoidLabelOverlap: true,
label: {
formatter: (params) => {
// console.log(params)
return `${params.name}(${params.value}`;
],
series: [
{
name: "Access From",
type: "pie",
radius: ["54%", "70%"],
avoidLabelOverlap: true,
label: {
formatter: (params) => {
// console.log(params)
return `${params.name}\n（${params.value}）`;
},
position: "outer",
alignTo: "edge",
margin: 5
},
},
labelLine: {
lineStyle: {
width: 3,
labelLine: {
lineStyle: {
width: 3,
},
},
},
data: newData.seriesData,
}
],
};
this.key++;
data: newData.seriesData,
}
],
};
this.key++;
},
immediate: true,
deep: true,
},
immediate: true,
deep: true,
},
},
};
};
</script>
<style lang="scss" scoped>
#centreLeft1Chart {
margin-bottom: 0.0521rem;
margin-left: .3125rem;
}
#centreLeft1Chart {
margin-bottom: 0.0521rem;
margin-left: 0.3125rem;
}
</style>
......
<!--
功能：结果
作者：calliope
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-13 11:09:01
-->
<template>
<div class='result'>
<p>响应xml</p>
<el-input type="textarea" disabled :rows="6" class="resulttext" placeholder="响应xml" v-model="REPMSGXML">
</el-input>
<p>错误信息</p>
<el-input type="textarea" disabled :rows="6" class="resulttext" placeholder="错误信息" v-model="ERRORINFO">
</el-input>
<div class="result-con" style="margin-bottom: 15px;">
<p>响应xml</p>
<el-input type="textarea" disabled :rows="6" class="resulttext" placeholder="响应xml" v-model="REPMSGXML">
</el-input>
</div>
<div class="result-con" style="margin-top: 15px;">
<p>错误信息</p>
<el-input type="textarea" disabled :rows="6" class="resulttext" placeholder="错误信息" v-model="ERRORINFO">
</el-input>
</div>
</div>
</template>
<script>
......@@ -40,21 +45,40 @@ export default {
<style scoped lang='scss'>
@import '~@/styles/public.scss';
.result {
padding: 15px;
p {
color: #ffffff;
line-height: 26px;
font-size: 18px;
}
height: 100%;
/deep/.el-textarea__inner {
min-height: 33vh !important;
background-color: #08346F !important;
height: 30vh !important;
color: #ffffff;
border: none !important;
color: #ffffff;
}
&-con {
background: #04275B;
border-radius: 2px;
padding: 10px;
box-sizing: border-box;
p {
color: #2997E8;
font-size: 14px;
position: relative;
padding-left: 10px;
}
p::before {
position: absolute;
content: '';
width: 3px;
height: 10px;
background-color: #2997E8;
left: 0;
top: 3px;
}
}
}
</style>
......
......@@ -10,26 +10,15 @@ export default {
type: String,
default: ''
}
},
data () {
return {
myValue: this.value,
}
},
methods: {
onJsonChange (value) {
},
onJsonSave (value) {
}
}
}
</script>
<style scoped lang="scss">
/* jsoneditor右上角默认有一个链接,加css去掉了 */
/deep/.el-textarea__inner {
min-height: 73vh !important;
height: 67vh !important;
border: none !important;
background-color: #08346F !important;
color: #ffffff;
border: none !important;
......
......@@ -2,6 +2,7 @@
<div>
<i class="el-icon-s-management icon" :title="title" @click="openDialog" />
<el-dialog
class="configuration"
:key="key"
:title="title"
:inner-dialog="true"
......@@ -9,8 +10,7 @@
width="600px"
:close-on-click-modal="false"
append-to-body
@cancel="cancel"
>
@cancel="cancel">
<vue-json-editor
id="minejson"
v-model="resultInfo"
......@@ -18,15 +18,13 @@
lang="zh"
@json-change="onJsonChange"
@json-save="onJsonSave"
@has-error="onError"
/>
@has-error="onError" />
<el-tooltip
content="全屏缩放"
effect="dark"
placement="bottom"
fullscreen
class="fullScreen"
>
class="fullScreen">
<i class="el-icon-full-screen" @click="enLarge" />
</el-tooltip>
<template slot="footer">
......@@ -34,142 +32,156 @@
<el-button
type="primary"
class="confirmBtn"
@click="onJsonSave"
>保存</el-button>
@click="onJsonSave">保存</el-button>
<el-button
type="primary"
class="cancelBtn"
@click="cancel"
>关闭</el-button>
@click="cancel">关闭</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script>
import vueJsonEditor from 'vue-json-editor'
export default {
components: {
vueJsonEditor
},
props: {
title: {
type: String,
default: '配置参数'
import vueJsonEditor from 'vue-json-editor'
export default {
components: {
vueJsonEditor
},
resultInfos: {
type: String,
default: ''
}
},
data() {
return {
activeNames: [],
resultInfo: {},
tmpResultInfo: {},
dialogVisible: false,
hasJsonFlag: true,
key: 0,
isEnlarge: false
}
},
watch: {
resultInfos: {
handler: function(val) {
++this.key
this.resultInfo =
this.resultInfos === '' ? {} : JSON.parse(this.resultInfos)
this.tmpResultInfo = this.resultInfo
props: {
title: {
type: String,
default: '配置参数'
},
deep: true,
immediate: true
}
},
mounted() {
this.resultInfo =
this.resultInfos === '' ? {} : JSON.parse(this.resultInfos)
},
methods: {
onJsonChange(value) {
// 只有在格式正确的时候进入此事件
this.hasJsonFlag = true
},
onJsonSave() {
const value = this.resultInfo
console.log(this.resultInfo, 'resultInfo')
if (this.hasJsonFlag === false) {
this.$message.error({ message: 'json格式验证失败', showClose: true })
// alert("json验证失败")
return false
} else {
this.dialogVisible = false
this.$emit('getJsonString', JSON.stringify(value))
return true
resultInfos: {
type: String,
default: ''
}
},
onError(value) {
this.hasJsonFlag = false
data () {
return {
activeNames: [],
resultInfo: {},
tmpResultInfo: {},
dialogVisible: false,
hasJsonFlag: true,
key: 0,
isEnlarge: false
}
},
openDialog() {
this.dialogVisible = true
watch: {
resultInfos: {
handler: function (val) {
++this.key
this.resultInfo =
this.resultInfos === '' ? {} : JSON.parse(this.resultInfos)
this.tmpResultInfo = this.resultInfo
},
deep: true,
immediate: true
}
},
cancel() {
console.log(this.tmpResultInfo, 'tmpResultInfo')
this.resultInfo = this.tmpResultInfo
this.dialogVisible = false
mounted () {
this.resultInfo =
this.resultInfos === '' ? {} : JSON.parse(this.resultInfos)
},
// 放大
enLarge() {
const fullarea = document.getElementById('minejson')
if (fullarea.requestFullscreen) {
fullarea.requestFullscreen()
} else if (fullarea.webkitRequestFullScreen) {
fullarea.webkitRequestFullScreen() // webkit内核(chrome、safari、Opera等)
} else if (fullarea.mozRequestFullScreen) {
fullarea.mozRequestFullScreen() // moz内核(firefox)
} else if (fullarea.msRequestFullscreen) {
fullarea.msRequestFullscreen() // IE11、edge
methods: {
onJsonChange (value) {
// 只有在格式正确的时候进入此事件
this.hasJsonFlag = true
},
onJsonSave () {
const value = this.resultInfo
console.log(this.resultInfo, 'resultInfo')
if (this.hasJsonFlag === false) {
this.$message.error({ message: 'json格式验证失败', showClose: true })
// alert("json验证失败")
return false
} else {
this.dialogVisible = false
this.$emit('getJsonString', JSON.stringify(value))
return true
}
},
onError (value) {
this.hasJsonFlag = false
},
openDialog () {
this.dialogVisible = true
},
cancel () {
console.log(this.tmpResultInfo, 'tmpResultInfo')
this.resultInfo = this.tmpResultInfo
this.dialogVisible = false
},
// 放大
enLarge () {
const fullarea = document.getElementById('minejson')
if (fullarea.requestFullscreen) {
fullarea.requestFullscreen()
} else if (fullarea.webkitRequestFullScreen) {
fullarea.webkitRequestFullScreen() // webkit内核(chrome、safari、Opera等)
} else if (fullarea.mozRequestFullScreen) {
fullarea.mozRequestFullScreen() // moz内核(firefox)
} else if (fullarea.msRequestFullscreen) {
fullarea.msRequestFullscreen() // IE11、edge
}
this.isEnlarge = true
}
this.isEnlarge = true
}
}
}
</script>
<style scoped lang="scss">
/* jsoneditor右上角默认有一个链接,加css去掉了 */
.icon {
color: #349af3;
}
/deep/ .jsoneditor-vue {
height: 100%;
}
.fullScreen {
position: absolute;
right: 5%;
top: 22%;
cursor: pointer;
color: #fff;
}
/deep/ .jsoneditor-modes {
display: none !important;
}
.jsoneditor-poweredBy {
display: none !important;
}
.jsoneditor-menu {
background-color: #9c9e9f !important;
border-bottom: 1px solid #9c9e9f !important;
}
.jsoneditor {
border: 1px solid #9c9e9f !important;
}
.el-collapse {
border: 0;
}
.el-collapse-item__header {
height: 44px;
}
/* jsoneditor右上角默认有一个链接,加css去掉了 */
.icon {
color: #349af3;
}
/deep/ .jsoneditor-vue {
height: 100%;
}
.fullScreen {
position: absolute;
right: 5%;
top: 20%;
cursor: pointer;
color: #fff;
}
/deep/ .jsoneditor-modes {
display: none !important;
}
/deep/.jsoneditor-poweredBy {
display: none !important;
}
.jsoneditor-menu {
background-color: #9c9e9f !important;
border-bottom: 1px solid #9c9e9f !important;
}
.jsoneditor {
border: 1px solid #9c9e9f !important;
}
.el-collapse {
border: 0;
}
.el-collapse-item__header {
height: 44px;
}
.configuration {
color: white;
margin-top: 6vh;
/deep/.el-dialog {
background-color: #031a46 !important;
border: 1px solid #5f82c7;
.el-dialog__header {
.el-dialog__title {
color: white !important;
}
.el-dialog__headerbtn {
top: 20px;
}
}
}
}
</style>
......
......@@ -10,9 +10,9 @@
<template>
<div :class="['lb-table', customClass]">
<el-table v-if="!heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }" ref="elTable"
:border='border' :row-class-name="tableRowClassName" :show-header='showHeader' @row-click="singleElection"
v-bind="$attrs" :height="tableHeight" v-on="$listeners" :data="data" style="width: 100%"
<el-table v-if="!heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }" ref="elTable" :border='border'
:row-class-name="tableRowClassName" :show-header='showHeader' @row-click="singleElection" v-bind="$attrs"
:height="tableHeight" v-on="$listeners" :data="data" style="width: 100%"
:span-method="this.merge ? this.mergeMethod : this.spanMethod">
<el-table-column width="45" align="center" v-if="isRadio">
<template slot-scope="scope">
......@@ -24,9 +24,10 @@
</lb-column>
</el-table>
<el-table v-else ref="elTable" class="table-fixed" :row-style="{ height: '50px' }" :border='border'
:row-class-name="tableRowClassName" :show-header='showHeader' v-bind="$attrs" :max-height="maxHeight"
v-on="$listeners" :data="data" style="width: 100%" :span-method="this.merge ? this.mergeMethod : this.spanMethod">
<el-table v-else ref="elTable" id="heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }"
:border='border' :row-class-name="tableRowClassName" :show-header='showHeader' v-bind="$attrs"
:max-height="maxHeight" :height="tableHeight" v-on="$listeners" :data="data" style="width: 100%"
:span-method="this.merge ? this.mergeMethod : this.spanMethod">
<el-table-column width="45" align="center" v-if="isRadio">
<template slot-scope="scope">
......@@ -80,6 +81,10 @@ export default {
type: Number,
default: 500
},
minHeight: {
type: Number,
default: undefined
},
heightNumSetting: {
type: Boolean,
default: false,
......@@ -139,6 +144,11 @@ export default {
} else {
_this.tableHeight = window.innerHeight - _this.heightNum
}
} else {
this.tableHeight = this.heightNum
this.$nextTick(() => {
this.minHeight && (document.getElementById('heightNumSetting').style.minHeight = this.minHeight + 'px')
})
}
},
calcHeightx (value, wappered = true) {
......
/*
* FileName: lb-column.vue
* Remark: element-column
* Project: lb-element-table
* Author: 任超
* File Created: Tuesday, 19th March 2019 9:58:23 am
* Last Modified: Tuesday, 19th March 2019 10:14:42 am
* Modified By: 任超
*/
<template>
<el-table-column v-bind="$attrs" v-on="$listeners" :prop="column.prop" :label="column.label" :type="column.type"
:index="column.index" :column-key="column.columnKey" :width="column.width" :min-width="column.minWidth"
:fixed="column.fixed" :scoped-slot="column.renderHeader" :sortable="column.sortable || false"
:sort-method="column.sortMethod" :sort-by="column.sortBy" :sort-orders="column.sortOrders"
:resizable="column.resizable || true" :formatter="column.formatter"
:show-overflow-tooltip="column.showOverflowTooltip || false" :align="column.align || align || 'center'"
:header-align="column.headerAlign || headerAlign || column.align || align || 'center'"
:class-name="column.className" :label-class-name="column.labelClassName" :selectable="column.selectable"
:reserve-selection="column.reserveSelection || false" :filters="column.filters"
:filter-placement="column.filterPlacement" :filter-multiple="column.filterMultiple"
:filter-method="column.filterMethod" :filtered-value="column.filteredValue">
<template slot="header" slot-scope="scope">
<lb-render v-if="column.renderHeader" :scope="scope" :render="column.renderHeader">
</lb-render>
<span v-else>{{ scope.column.label }}</span>
</template>
<template slot-scope="scope">
<lb-render :scope="scope" :render="column.render">
</lb-render>
</template>
<template v-if="column.children">
<lb-column v-for="(col, index) in column.children" :key="index" :column="col">
</lb-column>
</template>
</el-table-column>
</template>
<script>
import LbRender from './LbRender'
import forced from './forced.js'
export default {
name: 'LbColumn',
props: {
column: Object,
headerAlign: String,
align: String
},
components: {
LbRender
},
methods: {
setColumn () {
if (this.column.type) {
this.column.renderHeader = forced[this.column.type].renderHeader
this.column.render = this.column.render || forced[this.column.type].renderCell
}
if (this.column.formatter) {
this.column.render = (h, scope) => {
return <span>{scope.column.formatter(scope.row, scope.column, scope.row, scope.$index)}</span>
}
}
if (!this.column.render) {
this.column.render = (h, scope) => {
return <span>{scope.row[scope.column.property]}</span>
}
}
}
},
watch: {
column: {
handler () {
this.setColumn()
},
immediate: true
}
}
}
</script>
/*
* FileName: lb-render.vue
* Remark: 自定义render
* Project: lb-element-table
* Author: 任超
* File Created: Tuesday, 19th March 2019 10:15:30 am
* Last Modified: Tuesday, 19th March 2019 10:15:32 am
* Modified By: 任超
*/
<script>
export default {
name: 'LbRender',
functional: true,
props: {
scope: Object,
render: Function
},
render: (h, ctx) => {
return ctx.props.render ? ctx.props.render(h, ctx.props.scope) : ''
}
}
</script>
export default {
selection: {
renderHeader: (h, { store }) => {
return (
<el-checkbox
disabled={store.states.data && store.states.data.length === 0}
indeterminate={
store.states.selection.length > 0 && !store.states.isAllSelected
}
nativeOn-click={store.toggleAllSelection}
value={store.states.isAllSelected}
/>
)
},
renderCell: (h, { row, column, store, $index }) => {
return (
<el-checkbox
nativeOn-click={event => event.stopPropagation()}
value={store.isSelected(row)}
disabled={
column.selectable
? !column.selectable.call(null, row, $index)
: false
}
on-input={() => {
store.commit('rowSelectedChanged', row)
}}
/>
)
},
sortable: false,
resizable: false
},
index: {
renderHeader: (h, scope) => {
return <span>{scope.column.label || '#'}</span>
},
renderCell: (h, { $index, column }) => {
let i = $index + 1
const index = column.index
if (typeof index === 'number') {
i = $index + index
} else if (typeof index === 'function') {
i = index($index)
}
return <div>{i}</div>
},
sortable: false
},
expand: {
renderHeader: (h, scope) => {
return <span>{scope.column.label || ''}</span>
},
renderCell: (h, { row, store }, proxy) => {
const expanded = store.states.expandRows.indexOf(row) > -1
return (
<div
class={
'el-table__expand-icon ' +
(expanded ? 'el-table__expand-icon--expanded' : '')
}
on-click={e => proxy.handleExpandClick(row, e)}
>
<i class='el-icon el-icon-arrow-right' />
</div>
)
},
sortable: false,
resizable: false,
className: 'el-table__expand-column'
}
}
/*
* FileName: lb-table.vue
* Remark: element table
* Project: lb-element-table
* Author: 任超
* File Created: Tuesday, 19th March 2019 9:55:27 am
* Last Modified: Tuesday, 19th March 2019 9:55:34 am
* Modified By: 任超
*/
<template>
<div :class="['lb-table', customClass]">
<el-table v-if="!heightNumSetting" class="table-fixed" :row-style="{ height: '50px' }" ref="elTable" :border='border'
:row-class-name="tableRowClassName" :show-header='showHeader' @row-click="singleElection" v-bind="$attrs"
:height="tableHeight" v-on="$listeners" :data="data" style="width: 100%"
:span-method="this.merge ? this.mergeMethod : this.spanMethod">
<el-table-column width="45" align="center" v-if="isRadio">
<template slot-scope="scope">
<el-radio v-model="selected" :label="scope.$index"></el-radio>
</template>
</el-table-column>
<el-table-column :label="downTitle" align="center">
<lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
</lb-column>
</el-table-column>
</el-table>
<br>
<el-pagination class="lb-table-pagination" v-if="pagination" v-bind="$attrs" v-on="$listeners" background
layout="total, prev, pager, next" @current-change="paginationCurrentChange"
:style="{ 'margin-top': paginationTop, 'text-align': paginationAlign }">
</el-pagination>
</div>
</template>
<script>
import LbColumn from './LbColumn'
export default {
props: {
column: Array,
data: Array,
spanMethod: Function,
pagination: {
type: Boolean,
default: true,
},
downExcel: {
type: Boolean,
default: false,
},
downTitle: {
type: String,
default: '标题'
},
isRadio: {
type: Boolean,
default: false,
},
border: {
type: Boolean,
default: false,
},
showHeader: {
type: Boolean,
default: true,
},
paginationTop: {
type: String,
default: '0',
},
heightNum: {
type: Number,
default: 355,
},
maxHeight: {
type: Number,
default: 500
},
heightNumSetting: {
type: Boolean,
default: false,
},
customClass: {
type: String,
default: '',
},
paginationAlign: {
type: String,
default: 'left',
},
merge: Array,
},
components: {
LbColumn,
},
data () {
return {
tableHeight: 'auto',
mergeLine: {},
mergeIndex: {},
selected: ''
}
},
created () {
this.getMergeArr(this.data, this.merge)
this.getHeight()
},
computed: {
dataLength () {
return [] || this.data.length
},
},
methods: {
// 单选
singleElection (row) {
this.selected = this.data.indexOf(row);
},
tableRowClassName ({ row, rowIndex }) {
if (rowIndex % 2 === 1) {
return 'interlaced';
}
},
getHeight () {
if (!this.heightNumSetting) {
let _this = this
if (this.heightNum) {
_this.$nextTick(() => {
window.addEventListener('resize', () => {
_this.tableHeight = _this.calcHeightx(230)
});
_this.tableHeight = _this.calcHeightx(230)
})
} else {
_this.tableHeight = window.innerHeight - _this.heightNum
}
}
},
calcHeightx (value, wappered = true) {
//项目自定义的公共header部分的高度，可忽略
let header = document.querySelector(".from-clues-header").offsetHeight;
//value为动态计算table界面高度时，减去的其他空白部分，需自行在调试找到临界值，剩下的就是table表格的高度（包含header+body部分）
value = value == undefined ? 100 : value;
let res = window.innerHeight - parseInt(header) - value;
if (wappered) {
//通过原生方法，获取dom节点的高度------获取element-ui table表格body的元素
let wapper = window.document.getElementsByClassName('el-table__body-wrapper');
//通过原生方法，获取dom节点的高度------获取element-ui table表格header的元素
let header = window.document.getElementsByClassName('el-table__header-wrapper');
//必须加延时，要不然赋不上去值
setTimeout(() => {
//通过上边计算得到的table高度的value值，减去table表格的header高度，剩下的通过dom节点直接强行赋给table表格的body
wapper[0].style.height = (value - header[0].clientHeight)
}, 100)
}
return res;
},
clearSelection () {
this.$refs.elTable.clearSelection()
},
toggleRowSelection (row, selected) {
this.$refs.elTable.toggleRowSelection(row, selected)
},
toggleAllSelection () {
this.$refs.elTable.toggleAllSelection()
},
toggleRowExpansion (row, expanded) {
this.$refs.elTable.toggleRowExpansion(row, expanded)
},
setCurrentRow (row) {
this.$refs.elTable.setCurrentRow(row)
},
clearSort () {
this.$refs.elTable.clearSort()
},
clearFilter (columnKey) {
this.$refs.elTable.clearFilter(columnKey)
},
doLayout () {
this.$refs.elTable.doLayout()
},
sort (prop, order) {
this.$refs.elTable.sort(prop, order)
},
paginationCurrentChange (val) {
this.$emit('p-current-change', val)
},
getMergeArr (tableData, merge) {
if (!merge) return
this.mergeLine = {}
this.mergeIndex = {}
merge.forEach((item, k) => {
tableData.forEach((data, i) => {
if (i === 0) {
this.mergeIndex[item] = this.mergeIndex[item] || []
this.mergeIndex[item].push(1)
this.mergeLine[item] = 0
} else {
if (data[item] === tableData[i - 1][item]) {
this.mergeIndex[item][this.mergeLine[item]] += 1
this.mergeIndex[item].push(0)
} else {
this.mergeIndex[item].push(1)
this.mergeLine[item] = i
}
}
})
})
},
mergeMethod ({ row, column, rowIndex, columnIndex }) {
const index = this.merge.indexOf(column.property)
if (index > -1) {
const _row = this.mergeIndex[this.merge[index]][rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col,
}
}
},
},
watch: {
merge () {
this.getMergeArr(this.data, this.merge)
},
dataLength () {
this.getMergeArr(this.data, this.merge)
}
},
}
</script>
<style rel="stylesheet/scss" scoped lang="scss">
.lb-table {
margin-top: 1px;
.interlaced {
background: #fafcff;
border: 1px solid #ebf2fa;
}
}
/deep/.el-table .cell {
padding-left: 3px;
padding-right: 3px;
}
/deep/.el-radio__label {
display: none;
}
</style>
## 这是对于element-table 进行的二次封装
### 文档地址
<!-- table 已经全局注册不需要每个页面单独注册 -->
[Windows/Mac/Linux 全平台客户端](https://github.liubing.me/lb-element-table/zh/guide/)

1.81 MB | W: | H:

1.74 MB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
......@@ -2,10 +2,10 @@
<div class="navbar-con">
<div class="navbar">
<div class="title">
{{ logoName[0].DNAME }}
{{ logoName[0] && logoName[0].DNAME }}
</div>
<div class="user">
欢迎进入系统 {{ userInfo.name }}
欢迎进入系统 {{ userName }}
<span @click="onCancel">
<svg-icon icon-class="close" class="closeStyle" />退出系统</span>
</div>
......@@ -16,244 +16,247 @@
<sidebarRight />
</div>
</div>
</div>
</div>
</template>
<script>
import sidebarLeft from "./Sidebar/sidebarLeft";
import sidebarRight from "./Sidebar/sidebarRight";
import { logout } from "@/api/login.js";
import { mapGetters } from "vuex";
export default {
components: {
sidebarLeft,
sidebarRight,
},
computed: {
...mapGetters(["sidebar", "dicData", "userInfo"]),
logoName: function () {
return this.dicData['sysCode'] && this.dicData['sysCode'].filter(item =>
item.DCODE == "systemTitle"
)
}
},
methods: {
onCancel () {
logout()
.then((res) => {
sessionStorage.removeItem("token");
this.$store.dispatch("user/resetState");
this.$router.replace({
path: "/login",
query: {
redirect: this.$route.fullPath,
},
import sidebarLeft from "./Sidebar/sidebarLeft";
import sidebarRight from "./Sidebar/sidebarRight";
import { logout } from "@/api/login.js";
import { mapGetters } from "vuex";
export default {
components: {
sidebarLeft,
sidebarRight,
},
computed: {
...mapGetters(["sidebar", "dicData", "userInfo"]),
logoName () {
return this.dicData['sysCode'] && this.dicData['sysCode'].filter(item =>
item.DCODE == "systemTitle"
)
},
userName () {
return this.userInfo ? this.userInfo.name : ""
}
},
methods: {
onCancel () {
logout()
.then((res) => {
sessionStorage.removeItem("token");
this.$store.dispatch("user/resetState");
this.$router.replace({
path: "/jg",
query: {
redirect: this.$route.fullPath,
},
});
})
.catch((error) => {
// console.dir(error);
});
})
.catch((error) => {
// console.dir(error);
});
},
},
},
};
};
</script>
<style lang="scss" scoped>
/deep/.el-menu--horizontal {
display: flex;
align-items: center;
}
.menubg {
height: 34px;
width: 130px;
text-align: center;
color: #ffffff;
margin-right: 20px;
background: url("~@/image/navbar.png") no-repeat;
background-size: 100% 100%;
}
/deep/.el-menu-item {
@extend .menubg;
}
/deep/.el-submenu {
@extend .menubg;
}
/deep/.el-submenu__title {
height: 34px;
color: #ffffff;
}
/deep/.el-menu--horizontal {
display: flex;
align-items: center;
}
/deep/.el-submenu__title span {
font-size: 14px;
}
.menubg {
height: 34px;
width: 130px;
text-align: center;
color: #ffffff;
margin-right: 20px;
background: url("~@/image/navbar.png") no-repeat;
background-size: 100% 100%;
}
.sidebarLeft {
position: relative;
top: 13px;
width: 30%;
}
/deep/.el-menu-item {
@extend .menubg;
}
/deep/.el-menu {
display: flex;
justify-content: space-between;
}
/deep/.el-submenu {
@extend .menubg;
}
/deep/.el-menu-item {
flex: 1;
width: 100%;
}
/deep/.el-submenu__title {
height: 34px;
color: #ffffff;
}
.sidebarRight {
position: relative;
top: 13px;
width: 30%;
padding-left: 20px;
}
/deep/.el-submenu__title span {
font-size: 14px;
}
// 导航选中背景色
.xuanzhong {
background: url("~@/image/selNavbar.png") no-repeat;
background-size: 100% 100%;
color: #ffffff !important;
font-weight: 700;
}
.sidebarLeft {
position: relative;
top: 13px;
width: 30%;
}
/deep/.el-menu-item:hover {
@extend .xuanzhong;
}
/deep/.el-menu {
display: flex;
justify-content: space-between;
}
/deep/.el-submenu__title:hover {
@extend .xuanzhong;
}
/deep/.el-menu-item {
flex: 1;
width: 100%;
}
/deep/.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
@extend .xuanzhong;
}
.sidebarRight {
position: relative;
top: 13px;
width: 30%;
padding-left: 20px;
}
/deep/.el-menu-item.is-active {
@extend .xuanzhong;
}
// 导航选中背景色
.xuanzhong {
background: url("~@/image/selNavbar.png") no-repeat;
background-size: 100% 100%;
color: #ffffff !important;
font-weight: 700;
}
.navbar {
height: $headerHeight;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
padding: 0 20px;
justify-content: space-between;
background: url("~@/image/header.png") no-repeat;
background-size: 100% 100%;
/deep/.el-menu-item:hover {
@extend .xuanzhong;
}
.user {
font-size: 12px;
color: #ffffff;
position: absolute;
right: 20px;
top: 0;
cursor: pointer;
/deep/.el-submenu__title:hover {
@extend .xuanzhong;
}
.closeStyle {
margin-right: 5px;
}
/deep/.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
@extend .xuanzhong;
}
.title {
position: absolute;
left: 0;
top: 10px;
bottom: 0;
right: 0;
margin: 0 auto;
font-size: 32px;
color: #ffffff;
font-weight: 700;
text-align: center;
/deep/.el-menu-item.is-active {
@extend .xuanzhong;
}
.right-menu {
float: right;
height: 100%;
line-height: 50px;
.navbar {
height: $headerHeight;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
padding: 0 20px;
justify-content: space-between;
background: url("~@/image/header.png") no-repeat;
background-size: 100% 100%;
.shutdown {
font-size: 20px;
margin-left: 15px;
.user {
font-size: 12px;
color: #ffffff;
position: absolute;
right: 20px;
top: 0;
cursor: pointer;
.closeStyle {
margin-right: 5px;
}
}
.organization-item {
margin-right: 40px;
margin-top: -40px !important;
.title {
position: absolute;
left: 0;
top: 10px;
bottom: 0;
right: 0;
margin: 0 auto;
font-size: 32px;
color: #ffffff;
font-weight: 700;
text-align: center;
}
.item {
margin-right: 40px;
margin-top: -20px;
line-height: 18.4px;
cursor: pointer;
position: relative;
.right-menu {
float: right;
height: 100%;
line-height: 50px;
display: flex;
align-items: center;
.item-box {
position: absolute;
top: -5px;
left: 3px;
width: 100%;
min-width: 25px;
height: 25px;
.shutdown {
font-size: 20px;
margin-left: 15px;
cursor: pointer;
z-index: 100;
}
}
&:focus {
outline: none;
}
.right-menu-item {
display: inline-block;
height: 100%;
font-size: 18px;
color: #fff;
vertical-align: text-bottom;
.organization-item {
margin-right: 40px;
margin-top: -40px !important;
}
&.hover-effect {
.item {
margin-right: 40px;
margin-top: -20px;
line-height: 18.4px;
cursor: pointer;
transition: background 0.3s;
display: flex;
align-items: center;
position: relative;
&:hover {
background: rgba(0, 0, 0, 0.025);
.item-box {
position: absolute;
top: -5px;
left: 3px;
width: 100%;
min-width: 25px;
height: 25px;
cursor: pointer;
z-index: 100;
}
}
}
.avatar-wrapper {
position: relative;
display: flex;
height: 40px;
align-items: center;
&:focus {
outline: none;
}
.user-avatar {
cursor: pointer;
width: 35px;
height: 35px;
border-radius: 50%;
.right-menu-item {
display: inline-block;
height: 100%;
font-size: 18px;
color: #fff;
vertical-align: text-bottom;
&.hover-effect {
cursor: pointer;
transition: background 0.3s;
display: flex;
align-items: center;
&:hover {
background: rgba(0, 0, 0, 0.025);
}
}
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -15px;
top: 17px;
font-size: 12px;
.avatar-wrapper {
position: relative;
display: flex;
height: 40px;
align-items: center;
.user-avatar {
cursor: pointer;
width: 35px;
height: 35px;
border-radius: 50%;
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -15px;
top: 17px;
font-size: 12px;
}
}
}
}
}
</style>
......
<template>
<el-menu router :default-active="activeMenu" mode="horizontal">
<!-- 权限菜单 -->
<sidebar-item v-for="route in permission_routes.slice(2, 5)" :key="route.path" :item="route"
<sidebar-item v-for="route in permission_routes.slice(3, 6)" :key="route.path" :item="route"
:base-path="route.path" />
<!-- 菜单全部展示 -->
<!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> -->
......@@ -9,35 +9,40 @@
</template>
<script>
import { mapGetters } from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
import { asyncRoutes } from '@/router'
export default {
components: { SidebarItem, Logo },
computed: {
...mapGetters(['permission_routes', 'sidebar']),
activeMenu () {
const route = this.$route
const { meta, path } = route
if (meta.activeMenu) {
return meta.activeMenu
import { mapGetters } from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
import { asyncRoutes } from '@/router'
export default {
components: { SidebarItem, Logo },
computed: {
...mapGetters(['permission_routes', 'sidebar']),
activeMenu () {
const route = this.$route
const { meta, path } = route
if (meta.activeMenu) {
return meta.activeMenu
}
return path
},
variables () {
return variables
},
asyncRoutes () {
return asyncRoutes.slice(0, 3)
}
return path
},
variables () {
return variables
},
asyncRoutes () {
return asyncRoutes.slice(0, 3)
mounted () {
console.log("permission_routes", this.permission_routes);
}
}
}
</script>
<style scoped lang="scss">
.el-menu--horizontal {
display: flex;
background: none !important;
}
</style>
\ No newline at end of file
.el-menu--horizontal {
display: flex;
background: none !important;
}
</style>
......
<!--
* @Author: xiaomiao 1158771342@qq.com
* @Date: 2023-01-10 09:03:06
* @LastEditors: xiaomiao 1158771342@qq.com
* @LastEditTime: 2023-03-08 10:45:43
* @FilePath: \监管系统\js-web-jianguan\src\layout\components\Sidebar\sidebarRight.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<el-menu router :default-active="activeMenu" mode="horizontal">
<!-- 权限菜单 -->
<sidebar-item v-for="route in permission_routes.slice(5, 8)" :key="route.path" :item="route"
<sidebar-item v-for="route in permission_routes.slice(6, 9)" :key="route.path" :item="route"
:base-path="route.path" />
<!-- 菜单全部展示 -->
<!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> -->
......@@ -9,59 +17,59 @@
</template>
<script>
import { mapGetters } from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
import { asyncRoutes } from '@/router'
export default {
components: { SidebarItem, Logo },
computed: {
...mapGetters(['permission_routes', 'sidebar']),
activeMenu () {
const route = this.$route
const { meta, path } = route
if (meta.activeMenu) {
return meta.activeMenu
import { mapGetters } from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
import { asyncRoutes } from '@/router'
export default {
components: { SidebarItem, Logo },
computed: {
...mapGetters(['permission_routes', 'sidebar']),
activeMenu () {
const route = this.$route
const { meta, path } = route
if (meta.activeMenu) {
return meta.activeMenu
}
return path
},
variables () {
return variables
},
asyncRoutes () {
return asyncRoutes.slice(3, 6)
}
return path
},
variables () {
return variables
},
asyncRoutes () {
return asyncRoutes.slice(3, 6)
}
}
}
</script>
<style scoped lang="scss">
.el-menu--horizontal {
display: flex;
background: none !important;
}
.el-menu--horizontal {
display: flex;
background: none !important;
}
/deep/.el-menu-item:hover {
background: none;
font-weight: 700;
color: #fff !important;
}
/deep/.el-menu-item:hover {
background: none;
font-weight: 700;
color: #fff !important;
}
/deep/.el-submenu__title {
color: #fff;
font-size: 18px;
}
/deep/.el-submenu__title {
color: #fff;
font-size: 18px;
}
/deep/.el-submenu__title:hover {
background: none;
font-weight: 700;
font-size: 20px;
}
/deep/.el-submenu__title:hover {
background: none;
font-weight: 700;
font-size: 20px;
}
/deep/.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
background: none;
color: #fff;
font-size: 20px;
font-weight: 700 !important;
}
</style>
\ No newline at end of file
/deep/.el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
background: none;
color: #fff;
font-size: 20px;
font-weight: 700 !important;
}
</style>
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-10 14:59:43
-->
<template>
<div class="app-wrapper">
<div class="app-wrapper jgWrapper">
<navbar />
<div class="appMain">
<app-main />
......@@ -7,54 +12,61 @@
</div>
</template>
<script>
import { AppMain, Navbar, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
export default {
name: 'Layout',
components: {
AppMain,
Navbar,
Sidebar,
TagsView
},
mixins: [ResizeMixin],
computed: {
...mapState({
sidebar: state => state.app.sidebar,
needTagsView: state => state.settings.tagsView,
fixedHeader: state => state.settings.fixedHeader
})
import { AppMain, Navbar, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
export default {
name: 'Layout',
components: {
AppMain,
Navbar,
Sidebar,
TagsView
},
created () {
this.$store.dispatch("products/setData", "BDCJGPT");
console.log("ZOULEJG");
},
mixins: [ResizeMixin],
computed: {
...mapState({
sidebar: state => state.app.sidebar,
needTagsView: state => state.settings.tagsView,
fixedHeader: state => state.settings.fixedHeader
})
}
}
}
</script>
<style lang="scss">
@import "~@/styles/jgSidebar.scss";
</style>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/mixin.scss";
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
min-width: 1280px;
background: url('~@/image/bg.png') no-repeat;
background-size: 100% 100%;
padding: 12px;
box-sizing: border-box;
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
min-width: 1280px;
background: url("~@/image/bg.png") no-repeat;
background-size: 100% 100%;
padding: 12px;
box-sizing: border-box;
&.mobile.openSidebar {
position: fixed;
top: 0;
&.mobile.openSidebar {
position: fixed;
top: 0;
}
}
}
.appMain {
min-width: 1290px;
height: calc(100vh - 101px) !important;
box-sizing: border-box;
.appMain {
// min-width: 1280px;
height: calc(100vh - 101px) !important;
box-sizing: border-box;
.app-main {
height: 100%;
.app-main {
height: 100%;
}
}
}
</style>
......
......@@ -22,6 +22,6 @@ export default {
box-sizing: border-box;
flex: 1;
width: 100%;
margin-right: 15px;
// background-color: #ffffff;
}
</style>
......
......@@ -4,11 +4,7 @@
<div class="logo">
<img :src="require('@/image/logo.png')" alt="" />
</div>
<div class="backdrop">
<Breadcrumb />
</div>
<div class="right-menu">
<div class="dataView d-center pointer" @click="handleDataView">大屏展示</div>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" @command="handleCommand">
<div class="avatar-wrapper">
<span style="padding-right:10px">{{ name }}</span>
......@@ -67,15 +63,6 @@ export default {
}
}
.dataView {
color: #fff;
width: 120px;
height: 32px;
background: url('../../image/dp.png');
background-size: cover;
margin-right: 20px;
}
.NoticeBar {
position: absolute;
bottom: 0;
......@@ -83,7 +70,7 @@ export default {
.el-dropdown-menu {
padding: 0 !important;
border: 1px solid #EBEEF5;
border: 1px solid #ebeef5;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 4px 0 0 4px 4px;
......@@ -93,14 +80,14 @@ export default {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #4A4A4A;
color: #4a4a4a;
width: 140px;
height: 36px;
line-height: 36px;
}
.el-dropdown-menu__item:nth-child(6) {
border-top: 1px solid #EBEEF5;
border-top: 1px solid #ebeef5;
}
.popper__arrow {
......@@ -111,8 +98,8 @@ export default {
.el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu__item:focus {
background: #F6F7F9;
color: #4A4A4A;
background: #f6f7f9;
color: #4a4a4a;
}
}
......@@ -120,15 +107,11 @@ export default {
height: $headerHeight;
overflow: hidden;
position: relative;
// background: linear-gradient(270deg, #148CEE 0%, #1870E3 100%); //默认颜色
// box-shadow: 0 1px 0px rgba(0, 21, 41, 0.08);
background: #0D1230;
background: #3D59C4;
display: flex;
align-items: center;
padding-right: 20px;
justify-content: space-between;
margin-bottom: 10px;
.header-logo {
width: 300px;
}
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-06 16:18:21
-->
<template>
<div>
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu router :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText"
:unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false"
mode="vertical">
:unique-opened="true" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="vertical">
<!-- 权限菜单 -->
<!-- <sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" /> -->
<sidebar-item v-for="route in permission_routes.slice(3)" :key="route.path" :item="route"
:base-path="route.path" />
<!-- 菜单全部展示 -->
<sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" />
<!-- <sidebar-item v-for="route in asyncRoutes" :key="route.path" :item="route" :base-path="route.path" /> -->
</el-menu>
</el-scrollbar>
</div>
......@@ -27,6 +32,9 @@ export default {
title: defaultSettings.title
}
},
created () {
console.log(this.permission_routes);
},
computed: {
...mapGetters(['permission_routes', 'sidebar']),
activeMenu () {
......
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-10 15:00:56
-->
<template>
<div class="app-wrapper">
<div class="app-wrapper scWrapper">
<navbar />
<div class="main-container">
<sidebar class="sidebar-container" />
......@@ -8,60 +13,66 @@
</div>
</template>
<script>
import { AppMain, Navbar, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
export default {
name: 'Layout',
components: {
AppMain,
Navbar,
Sidebar,
TagsView
},
mixins: [ResizeMixin],
computed: {
...mapState({
sidebar: state => state.app.sidebar,
needTagsView: state => state.settings.tagsView,
fixedHeader: state => state.settings.fixedHeader
})
import { AppMain, Navbar, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
export default {
name: 'Layout',
components: {
AppMain,
Navbar,
Sidebar,
TagsView
},
mixins: [ResizeMixin],
created () {
this.$store.dispatch("products/setData", "BDCSBPT");
console.log("ZOULEJG");
},
computed: {
...mapState({
sidebar: state => state.app.sidebar,
needTagsView: state => state.settings.tagsView,
fixedHeader: state => state.settings.fixedHeader
})
}
}
}
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
<style lang="scss">
@import "~@/styles/mixin.scss";
@import "~@/styles/sbSidebar.scss";
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
background-color: $containerbg;
.app-wrapper {
@include clearfix;
position: relative;
height: 100%;
width: 100%;
// background-color: $containerbg;
padding: 0;
&.mobile.openSidebar {
position: fixed;
top: 0;
&.mobile.openSidebar {
position: fixed;
top: 0;
}
}
}
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 999;
}
.drawer-bg {
background: #000;
opacity: 0.3;
width: 100%;
top: 0;
height: 100%;
position: absolute;
z-index: 999;
}
.fixed-header {
width: 100%;
transition: width 0.28s;
}
.fixed-header {
width: 100%;
transition: width 0.28s;
}
.el-dropdown-menu--small {
padding: 0;
width: 5px;
}
.el-dropdown-menu--small {
padding: 0;
width: 5px;
}
</style>
......
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-10 16:43:16
*/
import router from "./router";
import store from "./store";
import { getMenuInfo } from "@/api/user";
......@@ -6,33 +11,31 @@ import "nprogress/nprogress.css"; // progress bar style
import getPageTitle from "@/utils/get-page-title";
import Cookies from "js-cookie";
NProgress.configure({ showSpinner: false }); // NProgress Configuration
router.beforeEach(async (to, from, next) => {
NProgress.start();
document.title = getPageTitle(to.meta.title);
let hasAddDict = store.state.dict.addDict;
let hasUser = store.state.user.hasUser;
let hasAddRoute = store.state.permission.addRoutes;
if (to.path == "/login") {
if (to.path == "/sb" || to.path == "/jg") {
sessionStorage.removeItem("token");
sessionStorage.setItem("psth", to.path)
next();
} else {
let code = sessionStorage.getItem("psth") == "/sb" ? "BDCSBPT" : "BDCJGPT"
//判断token是否存在
const hasToken = sessionStorage.getItem("token");
if (hasToken) {
//请求用户信息
if (!hasUser) {
store.dispatch("user/getUserInfo");
}
//加载字典
if (!hasAddDict) {
store.dispatch("dict/generateDic");
import("@/styles/public.scss");
}
if (hasAddRoute) {
next();
} else {
//请求菜单
const { result: getMenuData } = (await getMenuInfo()) || [];
const { result: getMenuData } = (await getMenuInfo(code)) || [];
const accessRoutes = await store.dispatch(
"permission/generateRoutes",
getMenuData
......@@ -42,16 +45,22 @@ router.beforeEach(async (to, from, next) => {
{ path: "*", redirect: "/404", hidden: true },
]);
const routeTo = Cookies.get("routerTo");
if (!hasAddDict) {
await store.dispatch("dict/generateDic");
}
if (routeTo && routeTo !== "/") {
next({ ...to, replace: true });
} else {
next("/home");
}
}
} else if (sessionStorage.getItem("psth")) {
next(sessionStorage.getItem("psth"));
} else {
next("/login");
next("/jg");
}
}
NProgress.done();
});
router.afterEach((to) => {
......
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '@/layout'
/* Router Modules */
// import componentsRouter from './modules/components'
export const constantRoutes = [
{
path: '/404',
......@@ -22,9 +20,14 @@ export const constantRoutes = [
},
//登录
{
path: "/login",
name: "login",
component: () => import("@/views/login/index.vue"),
path: "/jg",
name: "loginjg",
component: () => import("@/views/loginjg/index.vue"),
},
{
path: "/sb",
name: "loginsb",
component: () => import("@/views/loginsb/index.vue"),
},
// 监管首页
{
......
module.exports = {
title: '汉中市不动产综合监管',
title: '',
/**
* @type {boolean} true | false
* @description Whether show the settings right-panel
......
/*
* @Author: xiaomiao 1158771342@qq.com
* @Date: 2023-03-09 15:24:53
* @LastEditors: xiaomiao 1158771342@qq.com
* @LastEditTime: 2023-03-13 09:03:16
* @FilePath: \上报\bdcjg-web\src\store\modules\permission.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { constantRoutes } from '@/router'
import asyncRouter from '@/utils/asyncRouter.js'
const state = {
routes: [],
addRoutes: false,
routes: [],
addRoutes: false,
}
const mutations = {
SET_ROUTES: (state, routes) => {
state.addRoutes = true
state.routes = routes
},
RESET_ROUTE: (state) => {
state.addRoutes = false
}
SET_ROUTES: (state, routes) => {
state.addRoutes = true
state.routes = routes
},
RESET_ROUTE: (state) => {
state.addRoutes = false
}
}
const actions = {
// 添加全部菜单
generateRoutes ({ commit }, getMenuInfo) {
return new Promise(resolve => {
// 将权限菜单数组转成路由树数据结构
let permission_tree = asyncRouter(getMenuInfo)
const mergeResult = _.cloneDeep(constantRoutes).concat(permission_tree);
commit('SET_ROUTES', mergeResult)
resolve(permission_tree)
})
},
// 重置路由
resetRoutes ({ commit }) {
commit('RESET_ROUTE')
}
// 添加全部菜单
generateRoutes ({ commit }, getMenuInfo) {
return new Promise(resolve => {
// 将权限菜单数组转成路由树数据结构
let permission_tree = asyncRouter(getMenuInfo)
const mergeResult = _.cloneDeep(constantRoutes).concat(permission_tree);
commit('SET_ROUTES', mergeResult)
resolve(permission_tree)
})
},
// 重置路由
resetRoutes ({ commit }) {
commit('RESET_ROUTE')
}
}
// 树转数组
function dfs (root, fVisit) {
let stack = Array.isArray(root) ? [...root] : [root];
while (stack.length) {
let node = stack.pop();
fVisit && fVisit(node);
let children = node.children;
if (children && children.length) {
for (let i = children.length - 1; i >= 0; i--) stack.push(children[i]);
}
let stack = Array.isArray(root) ? [...root] : [root];
while (stack.length) {
let node = stack.pop();
fVisit && fVisit(node);
let children = node.children;
if (children && children.length) {
for (let i = children.length - 1; i >= 0; i--) stack.push(children[i]);
}
}
}
// 数组转树
//需要插入父节点id，pid为null或''，就是找root节点，然后root节点再去找自己的子节点
function array2Tree (data, pid) {
let res = [];
data.forEach(item => {
if (item.parentId === pid) {
let itemChildren = array2Tree(data, item.id);
if (itemChildren.length) item.children = itemChildren;
res.push(item);
}
});
// 菜单数据反转，保持一致
res.reverse()
_.each(res, c => {
if (c.children && c.children.length > 0) {
c.children.reverse()
}
})
return res;
let res = [];
data.forEach(item => {
if (item.parentId === pid) {
let itemChildren = array2Tree(data, item.id);
if (itemChildren.length) item.children = itemChildren;
res.push(item);
}
});
// 菜单数据反转，保持一致
res.reverse()
_.each(res, c => {
if (c.children && c.children.length > 0) {
c.children.reverse()
}
})
return res;
}
export default {
namespaced: true,
state,
mutations,
actions
namespaced: true,
state,
mutations,
actions
}
......
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-07 09:38:47
*/
import { getUserInfo } from "@/api/user";
const state = {
hasUser: false,
......@@ -15,14 +20,14 @@ const mutations = {
};
const actions = {
getUserInfo({ commit }) {
getUserInfo ({ commit }) {
return new Promise(async (resolve) => {
let { result: res } = await getUserInfo();
commit("SET_USERINFO", res);
resolve(true);
});
},
resetState({ commit }) {
resetState ({ commit }) {
commit("RESET_USER");
},
};
......
......@@ -2,11 +2,19 @@
overflow: hidden;
background: url("~@/image/dialogBg.png") no-repeat !important;
background-size: 100% 100% !important;
min-height: 90vh;
.dialog_title {
display: flex;
position: relative;
top: -2px;
font-size: 22px;
top: -10px;
width: 38%;
height: 40px;
margin-left: 28px;
justify-content: center;
white-space: nowrap;
b {
font-weight: 200;
display: inline-block;
......@@ -48,10 +56,88 @@
box-shadow: inset 0px 0px 12px 0px #02D9FD;
border-radius: 2px;
border: 1px solid #6BC1FC;
margin: 0 18px 15px 18px;
margin: 0 18px 10px 18px;
}
}
.item-content-input {
/deep/.el-input__inner {
border: none !important;
text-align: right;
}
}
.regularHeight {
display: flex;
flex: 1;
height: 100%;
flex-direction: column;
.editDialogBox-con,
.JsonEditor {
flex: 1;
height: 100%;
}
}
.dialog-from {
padding: 13px;
border-radius: 2px;
box-sizing: border-box;
.el-row {
display: flex;
flex-wrap: nowrap;
}
.el-col {
line-height: 18px;
display: flex;
align-items: center;
margin-bottom: 3px;
color: #B5D6DC;
border-radius: 2px;
border: 1px solid #224C7C;
span {
display: inline-block;
padding: 3px;
border-radius: 3px;
overflow: hidden;
white-space: nowrap;
text-align: left;
color: #02D9FD;
}
p {
flex: 1;
width: 100%;
padding-left: 5px;
line-height: 20px;
color: #c0c4cc;
cursor: not-allowed;
white-space: nowrap;
margin-right: 5px;
text-align: right;
}
}
}
/deep/.el-textarea__inner {
border: 1px solid #224C7C;
margin: 0 0 10px 0 !important;
width: 100% !important;
color: #dadde3 !important;
background: transparent !important;
}
/deep/.el-input__inner {
border: 1px solid #224C7C !important;
margin: 0 !important;
width: 100% !important;
color: #dadde3 !important;
background: transparent !important;
}
.dialog_title {
@include flex;
justify-content: space-between;
......@@ -60,7 +146,6 @@
.el-dialog__header {
color: #FFFFFF;
// background: #074487;
height: 46px !important;
width: 97%;
margin: 0 auto;
......@@ -70,6 +155,7 @@
.el-dialog__body {
padding-top: 0;
padding-bottom: 0;
height: 95vh;
}
.el-dialog__headerbtn {
......@@ -79,7 +165,8 @@
background-size: 100% 100%;
right: 40px;
top: 33px;
&:hover{
&:hover {
box-shadow: inset 0px 0px 12px 0px #02D9FD;
}
}
......
// cover some element-ui styles
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
font-weight: 400 !important;
......@@ -16,6 +15,25 @@
padding: 0 7px !important;
}
// input 样式
// 全局css 加上以下代码，可以隐藏上下箭头
// 取消input的上下箭头
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
input::-webkit-outer-spin-button {
-webkit-appearance: none !important;
}
input[type="number"] {
-moz-appearance: textfield;
}
.el-upload {
input[type="file"] {
display: none !important;
......@@ -208,10 +226,29 @@ table td {
box-shadow: inset 0px 0px 20px 0px #03DBFF !important;
}
.el-table__body tr:hover>td {
.el-table__body tr:hover>td,
.el-table__body tr.hover-row>td.el-table__cell {
background: none !important;
}
// table 固定列样式
// tr:hover {
// background: #063160 !important;
// box-shadow: inset 0px 0px 20px 0px #03DBFF !important;
// }
// .el-table__fixed-right-patch {
// background-color: #073781
// }
.el-table__fixed-right {
background-color: #073781
}
.el-table__fixed::before,
.el-table__fixed-right::before {
display: none;
}
// 表格样式
.el-table th {
height: 48px !important;
......@@ -488,4 +525,50 @@ table td {
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background-color: transparent !important;
}
// 提示框
.el-message-box {
background-color: #031a46;
border: 1px solid #5f82c7;
.el-message-box__title {
color: white;
}
.el-message-box__content {
color: white;
}
}
// 上级菜单
.el-cascader__dropdown {
background-color: #031a46;
border: 1px solid #5f82c7;
}
.el-cascader-menu {
color: white;
}
.el-radio {
.el-cascader-menu:hover {
color: white;
}
}
.el-cascader-node:not(.is-disabled):hover,
.el-cascader-node:not(.is-disabled):focus {
background: #F5F7FA;
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: rgb(80, 142, 235);
}
\ No newline at end of file
......
......@@ -2,7 +2,7 @@
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
// @import './sidebar.scss';
/* CSS 初始化 */
html,
......@@ -336,6 +336,15 @@ aside {
color: $yellow;
}
// 操作按钮样式
.btnColor {
color: #8DEAF9;
}
.successColor {
color:#67C23A
}
// 通过 入库 样式
.adopt,
.success {
......@@ -408,4 +417,10 @@ aside {
top: 2px;
background: #FF7962;
color: #FF7962;
}
// 引入字体
@font-face {
font-family: AliBold;
src: url('../image/font/Alibaba_PuHuiTi_2.0_55_Regular_85_Bold.ttf')
}
\ No newline at end of file
......
#app {
.jgWrapper {
.main-container {
width: 100%;
height: calc(100% - 74px);
......@@ -340,4 +340,5 @@
word-break: break-all;
line-height: 20px;
flex: 1;
}
\ No newline at end of file
......
.scWrapper {
.main-container {
width: 100%;
height: calc(100% - 74px);
transition: margin-left 0.28s;
display: flex;
}
.sidebar-container {
transition: width 0.28s;
width: $sideBarWidth !important;
font-size: 0px;
margin-right: 15px;
background: #121F41;
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out,
0s padding-right ease-in-out;
}
.scrollbar-wrapper {
overflow-x: hidden !important;
margin-right: 0 !important;
&::-webkit-scrollbar {
display: none;
}
}
a {
display: inline-block;
width: 100%;
overflow: hidden;
}
.svg-icon {
margin-right: 5px;
}
.sub-el-icon {
margin-right: 12px;
margin-left: -2px;
}
.el-menu {
background-color: transparent !important;
border: none;
height: 100%;
width: 100% !important;
}
// menu hover
.el-menu--collapse .el-submenu__title,
.el-menu--collapse .submenu-title-noDropdown {
margin-left: 0px !important;
}
// 有子级
.el-submenu__title {
padding-left: 10px !important;
color: $menuText;
height: 42px;
background: linear-gradient(90deg, #013874 0%, #081B56 100%);
margin-bottom: 8px;
&:hover {
color: $subMenuActiveText !important;
background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%);
.svg-icon,
i,
span {
color: $subMenuActiveText !important;
}
}
}
// 没有子级
.submenu-title-noDropdown {
color: $menuText;
padding-left: 20px;
margin-bottom: 8px;
background: linear-gradient(90deg, #013874 0%, #081B56 100%);
&:hover {
color: $menuActiveText !important;
background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%);
.svg-icon {
color: #1ea6f8 !important;
}
i {
color: #1ea6f8 !important;
}
}
}
.submenu-title-noDropdown.is-active,
.el-submenu__title.is-active {
color: $menuActiveText;
background: linear-gradient(90deg, #1D66DC 0%, #081B56 100%);
.svg-icon {
color: #1ea6f8 !important;
}
i {
color: #1ea6f8 !important;
}
}
.submenu-title-noDropdown,
.el-submenu__title {
font-weight: 600;
font-size: $sideBarFontSize;
// margin: 0 10px;
>i {
color: $subMenuActiveText !important;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
margin-right: 10px;
}
.svg-icon {
font-size: 18px;
margin-top: -5px;
}
}
.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow {
transform: rotateZ(0deg) !important;
-webkit-transform: rotateZ(0deg) !important;
-moz-transform: rotateZ(0deg) !important;
-ms-transform: rotateZ(0deg) !important;
-o-transform: rotateZ(0deg) !important;
}
.is-active>.el-submenu__title {
color: #fff !important;
}
& .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item {
&.is-active {
background-color: $subMenuHover !important;
color: $menuActiveText !important;
}
&:hover {
background-color: $subMenuHover !important;
color: $menuActiveText !important;
}
min-width: 130px !important;
background-color: transparent !important;
font-weight: 600;
font-size: $sideBarFontSize;
margin: 0 10px;
// border-radius: 6px;
}
}
.hideSidebar {
.sidebar-container {
width: 54px !important;
}
.submenu-title-noDropdown {
padding: 0 !important;
position: relative;
.el-tooltip {
padding: 0 !important;
.svg-icon {
margin-left: 16px;
}
.sub-el-icon {
margin-left: 19px;
}
}
}
.el-submenu {
overflow: hidden;
&>.el-submenu__title {
padding: 0 !important;
.svg-icon {
margin-left: 16px;
}
.sub-el-icon {
margin-left: 19px;
}
.el-submenu__icon-arrow {
display: none;
}
}
}
.el-menu--collapse {
.el-submenu {
&>.el-submenu__title {
&>span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
}
}
}
}
.el-menu--collapse .el-menu .el-submenu {
min-width: $sideBarWidth !important;
}
// mobile responsive
.mobile {
.main-container {
margin-left: 0px;
}
.sidebar-container {
transition: transform 0.28s;
width: $sideBarWidth !important;
}
&.hideSidebar {
.sidebar-container {
pointer-events: none;
transition-duration: 0.3s;
transform: translate3d(-$sideBarWidth, 0, 0);
}
}
}
.withoutAnimation {
.main-container,
.sidebar-container {
transition: none;
}
}
}
// when menu collapsed
.el-menu--vertical {
&>.el-menu {
.svg-icon {
margin-right: 16px;
}
.sub-el-icon {
margin-right: 12px;
margin-left: -2px;
}
}
.nest-menu .el-submenu>.el-submenu__title,
.el-menu-item {
width: calc(100% - 12px);
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
font-weight: 600 !important;
font-size: 15px !important;
background-color: $menuHover !important;
color: $menuText !important;
&:hover {
background-color: $menuHover !important;
opacity: .9;
.svg-icon,
i,
span {
color: $menuText;
}
}
}
// the scroll bar appears when the subMenu is too long
>.el-menu--popup {
max-height: 100vh;
overflow-y: auto;
background-color: #32ACFE !important;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
min-width: 140px;
padding: 12px 0;
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
}
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
border-radius: 20px;
}
}
}
.el-submenu__title {
display: flex;
align-items: center;
}
.el-submenu__title span {
white-space: normal;
word-break: break-all;
line-height: 20px;
flex: 1;
padding-right: 20px;
}
.el-menu-item {
height: 42px;
display: flex;
align-items: center;
padding-right: 20px !important;
}
.el-menu-item span {
white-space: nowrap !important;
word-break: break-all;
line-height: 20px;
flex: 1;
}
\ No newline at end of file
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-07 09:35:10
*/
import Layout from '@/layout'
export default function filterAsyncRouter (routers) {
routers.forEach(item => {
......@@ -21,4 +26,4 @@ export default function filterAsyncRouter (routers) {
}
function loadView (view) {
return r => require.ensure([], () => r(require(`@/views${view}.vue`)))
}
\ No newline at end of file
}
......
/*
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-03-13 14:11:50
*/
/**
* 此文件主要创建 axios 实例，然后添加请求拦截器和响应拦截器
*/
......@@ -57,17 +62,17 @@ service.interceptors.response.use(
}
);
//对错误信息的处理函数
function handleErrorData(status) {
function handleErrorData (status) {
switch (status) {
case 401:
Message.error("由于长时间未操作，请重新登录!");
router.replace({
path: "/login",
query: {
redirect: router.history.current.fullPath,
},
});
break;
// case 401:
// Message.error("由于长时间未操作，请重新登录!");
// router.replace({
// path: "/login/jg",
// query: {
// redirect: router.history.current.fullPath,
// },
// });
// break;
case 403:
Message.error("拒绝访问");
break;
......
import Vue from 'vue'
// 下载，导出
Vue.prototype.$download = function(name, href) {
Vue.prototype.$download = function (name, href) {
var a = document.createElement('a') // 创建a标签
var e = document.createEvent('MouseEvents') // 创建鼠标事件对象
e.initEvent('click', false, false) // 初始化事件对象
......@@ -10,7 +10,7 @@ Vue.prototype.$download = function(name, href) {
a.dispatchEvent(e) // 给指定的元素，执行事件click事件
}
// 导出json文件
Vue.prototype.$downloadJson = function(data, name) {
Vue.prototype.$downloadJson = function (data, name) {
// 1 生成文件的 blob 对象
const blobData = new Blob([JSON.stringify(data)], {
type: 'application/octet-stream'
......@@ -84,7 +84,7 @@ const checkCode = (rule, value, callback) => {
// }
// }
// 日期格式转换 "yyyy-MM-dd HH:mm:ss"
Vue.prototype.$formdate = function(date) {
Vue.prototype.$formdate = function (date) {
if (!date) {
return ""
}
......@@ -95,22 +95,22 @@ Vue.prototype.$formdate = function(date) {
var hh = (d.getHours() < 10 ? '0' + d.getHours() : d.getHours()) + ':';
var mm = (d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes()) + ':';
var ss = (d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds());
return YY + MM + DD +" "+hh + mm + ss
return YY + MM + DD + " " + hh + mm + ss
}
// 时间格式过滤
Vue.filter('timeFilter', function(timeStr) {
Vue.filter('timeFilter', function (timeStr) {
if (timeStr) {
return timeStr.substring(0, 10)
}
})
export function getType(o) {
export function getType (o) {
return Object.prototype.toString.call(o).slice(8, -1)
}
export function isKeyType(o, type) {
export function isKeyType (o, type) {
return getType(o).toLowerCase() === type.toLowerCase()
}
// 深拷贝全局挂载
Vue.prototype.$deepCopy = function(sth) {
Vue.prototype.$deepCopy = function (sth) {
// 深度复制数组
// if (Object.prototype.toString.call(obj) === "[object Array]") {
// const object = [];
......@@ -196,7 +196,7 @@ Vue.prototype.$dealArrNotDisabled = arr => {
}
}
}
function nodeDeal(arr) {
function nodeDeal (arr) {
arr.forEach(item => {
delete item.disabled
if (item.children) {
......@@ -222,7 +222,7 @@ Vue.prototype.$dealArrDisabled = (arr, id) => {
}
}
}
function nodeDeal(arr) {
function nodeDeal (arr) {
arr.forEach(item => {
item['disabled'] = true
if (item.children) {
......@@ -249,10 +249,9 @@ Vue.prototype.$getNodeRoute = (val, id) => {
}
}
})
function nodefun(newVal, newId, newCid_list) {
function nodefun (newVal, newId, newCid_list) {
let flag = false
newVal.forEach(j => {
// console.log(j)
if (j.id === newId) {
newCid_list.push(j.id)
flag = true
......@@ -272,7 +271,7 @@ Vue.prototype.$getNodeRoute = (val, id) => {
return newCid_list
}
}
function result(cid_list) {
function result (cid_list) {
const arr = cid_list.concat()
arr.pop()
return arr
......@@ -325,7 +324,7 @@ Vue.prototype.$findParent = (list, id) => {
Vue.prototype.$findChildren = (list, nodeId) => {
let newArray = []
let flag = false
function dealList(list, nodeId) {
function dealList (list, nodeId) {
if (list.length !== 0) {
list.forEach(item => {
if (!flag) {
......
import XLSX2 from "xlsx";
import XLSX from "xlsx-style";
/**
* 获取数据类型
* @param {All} [o] 需要检测的数据
* @returns {String}
*/
export function getType(o) {
export function getType (o) {
return Object.prototype.toString.call(o).slice(8, -1);
}
/**
......@@ -13,10 +15,10 @@ export function getType(o) {
* @param {String} [type] 数据类型
* @returns {Boolean}
*/
export function isKeyType(o, type) {
export function isKeyType (o, type) {
return getType(o).toLowerCase() === type.toLowerCase();
}
export function deepCopy(sth) {
export function deepCopy (sth) {
let copy;
if (null == sth || "object" != typeof sth) return sth;
if (isKeyType(sth, 'date')) {
......@@ -47,7 +49,7 @@ export function deepCopy(sth) {
* @param endLen 字符串后面保留位数
* @returns {string}
*/
export function hideCode(str, frontLen, endLen = 0) {
export function hideCode (str, frontLen, endLen = 0) {
var len = str.length - frontLen - endLen;
var xing = '';
for (var i = 0; i < len; i++) {
......@@ -57,7 +59,7 @@ export function hideCode(str, frontLen, endLen = 0) {
};
// 数组去重
export function unique(arr) {
export function unique (arr) {
var obj = {};
return arr.filter(function (item, index, arr) {
return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
......@@ -65,7 +67,7 @@ export function unique(arr) {
}
// 创造id
export function getUuid(len, radix) {
export function getUuid (len, radix) {
var chars = "0123456789abcdefghijklmnopqrstuvwxyz".split(
""
);
......@@ -89,7 +91,7 @@ export function getUuid(len, radix) {
}
//js计算两个时间戳之间的时间差 (月)
export function intervalTime(startTime, endTime) {
export function intervalTime (startTime, endTime) {
// var timestamp=new Date().getTime(); //计算当前时间戳
var timestamp = (Date.parse(new Date())) / 1000;//计算当前时间戳 (毫秒级)
var date1 = ""; //开始时间
......@@ -107,16 +109,184 @@ export function intervalTime(startTime, endTime) {
return mon
}
// 日期转时间戳
export function js_strto_time(str_time) {
export function js_strto_time (str_time) {
var str = str_time.replace(/-/g, '/') // 将-替换成/，因为下面这个构造函数只支持/分隔的日期字符串
var date = new Date(str) // 构造一个日期型数据，值为传入的字符串
return date.getTime()
}
// 时间戳转日期
export function timestampToTime(timestamp) {
export function timestampToTime (timestamp) {
var date = new Date(timestamp)//时间戳为10位需*1000，时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '-'
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
var D = date.getDate() > 10 ? date.getDate() : '0' + date.getDate()
return Y + M + D
}
\ No newline at end of file
}
function formatDate (value) {
var date = new Date(value);
var y = date.getFullYear(),
m = date.getMonth() + 1,
d = date.getDate()
if (m < 10) { m = '0' + m; }
if (d < 10) { d = '0' + d; }
var t = y + '-' + m + '-' + d
return t;
}
export function getCurrentDate (date = 'firstDay') {
var now = new Date() // 当前日期
var nowYear = now.getFullYear() //当前年
var nowMonth = now.getMonth() //当前月 （值为0~11）
var d = now.getDate() //当天
if (date == 'firstDay') {
return formatDate(new Date(nowYear, nowMonth, 1)) // 本月开始时间
} else {
return formatDate(new Date(nowYear, nowMonth + 1, 0)) // 本月结束时间
}
}
export function setExport2Excel (exportName) {
/* generate workbook object from table */
var wb = XLSX2.utils.table_to_sheet(document.querySelector("#mytable"));//mytable为表格的id名
if (!wb['!merges']) {
this.$message.warning('无法导出：报表无数据');
return
}
for (var i = 0; i < 11; i++) {
wb["!cols"][i] = { wpx: 150 }
}
// 样式的文档地址
// https://www.npmjs.com/package/xlsx-style
for (const key in wb) {
if (key == 'A1') {
wb[key].s = {
font: {//字体设置
sz: 24,
bold: true,
},
alignment: {//文字居中
horizontal: 'center',
vertical: 'center',
wrapText: 1,
indent: 0,
wrap_text: true
},
border: { // 设置边框
top: { style: 'thin' },
bottom: { style: 'thin' },
left: { style: 'thin' },
right: { style: 'thin' }
}
}
} else if (key.indexOf('!') === -1) {
wb[key].s = {
font: {//字体设置
sz: 13,
bold: false,
color: {
rgb: '000000'//十六进制，不带#
}
},
alignment: {//文字居中
horizontal: 'center',
vertical: 'center',
wrapText: 1,
indent: 0,
wrap_text: true
},
border: { // 设置边框
top: { style: 'thin' },
bottom: { style: 'thin' },
left: { style: 'thin' },
right: { style: 'thin' }
}
}
}
}
var data = addRangeBorder(wb['!merges'], wb) //合并项添加边框
var filedata = sheet2blob(data)
openDownloadDialog(filedata, exportName + ".xlsx")
}
//为合并项添加边框
function addRangeBorder (range, ws) {
let arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
range.forEach(item => {
let startColNumber = Number(item.s.r), endColNumber = Number(item.e.r);
let startRowNumber = Number(item.s.c), endRowNumber = Number(item.e.c);
console.log(startColNumber);
const test = ws[arr[startRowNumber] + (startColNumber + 1)];
for (let col = startColNumber; col <= endColNumber; col++) {
for (let row = startRowNumber; row <= endRowNumber; row++) {
ws[arr[row] + (col + 1)] = test;
}
}
})
return ws;
}
//将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
function sheet2blob (sheet, sheetName) {
sheetName = sheetName || 'sheet1';
var workbook = {
SheetNames: [sheetName],
Sheets: {}
};
workbook.Sheets[sheetName] = sheet; // 生成excel的配置项
var wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
type: 'binary'
};
var wbout = XLSX.write(workbook, wopts);
var blob = new Blob([s2ab(wbout)], {
type: "application/octet-stream"
}); // 字符串转ArrayBuffer
function s2ab (s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
return blob;
}
function openDownloadDialog (url, saveName) {
if (typeof url == 'object' && url instanceof Blob) {
url = URL.createObjectURL(url); // 创建blob地址
}
var aLink = document.createElement('a');
aLink.href = url;
aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
var event;
if (window.MouseEvent) event = new MouseEvent('click');
else {
event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
}
aLink.dispatchEvent(event);
}
export function judgeListComplete (list) {
function judgeObjectComplete (obj) {
let flag = false
for (const key in obj) {
if (obj[key] == '' && key != 'index') {
flag = true
}
}
return flag
}
let isNotComplete = list.findIndex(item => {
return judgeObjectComplete(item) === true
})
if (isNotComplete > -1) {
return false
} else {
return true
}
}
......