mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
场站+服务管理功能开发，角色权限完善，总览弹窗接口联调
This commit is contained in:
ym1026
@@ -113,6 +113,46 @@ export const columnList = [
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
page: 'permission',
|
||||
columns: [
|
||||
{
|
||||
title: '权限ID',
|
||||
dataIndex: 'permission_id',
|
||||
key: 'permission_id',
|
||||
ellipsis: true,
|
||||
// filterable: true,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
title: '权限名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
// filterable: true
|
||||
},
|
||||
{
|
||||
title: '权限描述',
|
||||
dataIndex: 'describe',
|
||||
key: 'describe',
|
||||
ellipsis: true
|
||||
// filterable: true
|
||||
},
|
||||
|
||||
{
|
||||
title: '是否启用',
|
||||
dataIndex: 'is_open',
|
||||
key: 'is_open',
|
||||
scopedSlots: { customRender: 'is_open' }
|
||||
}
|
||||
|
||||
// {
|
||||
// title: '操作',
|
||||
// dataIndex: 'operate',
|
||||
// key: 'operate',
|
||||
// scopedSlots: { customRender: 'action' }
|
||||
// }
|
||||
]
|
||||
},
|
||||
{
|
||||
page: 'station',
|
||||
columns: [
|
||||
@@ -139,16 +179,12 @@ export const columnList = [
|
||||
{
|
||||
title: '场站经度',
|
||||
dataIndex: 'lon',
|
||||
width: 50,
|
||||
key: 'lon'
|
||||
// filterable: true
|
||||
},
|
||||
{
|
||||
title: '场站纬度',
|
||||
dataIndex: 'lat',
|
||||
width: 50,
|
||||
key: 'lat'
|
||||
// filterable: true
|
||||
},
|
||||
{
|
||||
title: '储能容量',
|
||||
@@ -164,10 +200,9 @@ export const columnList = [
|
||||
// filterable: true
|
||||
},
|
||||
{
|
||||
title: '场站类别',
|
||||
title: '储能容量',
|
||||
dataIndex: 'capacity',
|
||||
key: 'capacity',
|
||||
scopedSlots: { customRender: 'capacity' }
|
||||
key: 'capacity'
|
||||
},
|
||||
{
|
||||
title: '场站状态',
|
||||
@@ -188,6 +223,50 @@ export const columnList = [
|
||||
scopedSlots: { customRender: 'policy_id' }
|
||||
},
|
||||
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operate',
|
||||
key: 'operate',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
page: 'serviceApi',
|
||||
columns: [
|
||||
{
|
||||
title: '接口ID',
|
||||
dataIndex: 'api_id',
|
||||
key: 'api_id',
|
||||
ellipsis: true,
|
||||
// filterable: true,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
title: '接口名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
// filterable: true
|
||||
},
|
||||
{
|
||||
title: '接口描述',
|
||||
dataIndex: 'describe',
|
||||
key: 'describe'
|
||||
// filterable: true
|
||||
},
|
||||
{
|
||||
title: '接口参数',
|
||||
dataIndex: 'params',
|
||||
key: 'params'
|
||||
},
|
||||
|
||||
{
|
||||
title: '是否启用',
|
||||
dataIndex: 'is_open',
|
||||
key: 'is_open',
|
||||
scopedSlots: { customRender: 'is_open' }
|
||||
},
|
||||
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'operate',
|
||||
@@ -277,8 +356,54 @@ export const roleOptions = [
|
||||
value: '',
|
||||
key: 'permission',
|
||||
type: 'slot',
|
||||
slotName: 'permission',
|
||||
className: 'item-l'
|
||||
slotName: 'treetable',
|
||||
className: 'item-l',
|
||||
tableData: [],
|
||||
selectTableData: [],
|
||||
columns: [
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
ellipsis: true,
|
||||
filterable: true,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
title: '页面路径',
|
||||
dataIndex: 'route',
|
||||
key: 'route'
|
||||
// filterable: true
|
||||
},
|
||||
{
|
||||
title: '是否允许新增操作',
|
||||
dataIndex: 'is_add',
|
||||
key: 'is_add',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'is_add' }
|
||||
},
|
||||
{
|
||||
title: '是否允许删除操作',
|
||||
dataIndex: 'is_del',
|
||||
key: 'is_del',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'is_del' }
|
||||
},
|
||||
{
|
||||
title: '是否允许编辑操作',
|
||||
dataIndex: 'is_edit',
|
||||
key: 'is_edit',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'is_edit' }
|
||||
},
|
||||
{
|
||||
title: '是否允许查看操作',
|
||||
dataIndex: 'is_view',
|
||||
key: 'is_view',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'isQuery' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
// 0:禁用; 1:启用
|
||||
@@ -417,6 +542,51 @@ export const stationOptions = [
|
||||
ruleForm: {}
|
||||
}
|
||||
]
|
||||
export const serviceApiOptions = [
|
||||
{
|
||||
title: '基础信息',
|
||||
icon: 'icon-xinxi',
|
||||
list: [
|
||||
{
|
||||
label: '接口名称',
|
||||
value: '',
|
||||
key: 'name',
|
||||
type: 'input'
|
||||
},
|
||||
{
|
||||
label: '接口参数',
|
||||
value: '',
|
||||
key: 'params',
|
||||
type: 'input'
|
||||
},
|
||||
{
|
||||
label: '接口描述',
|
||||
value: '',
|
||||
key: 'describe',
|
||||
type: 'textarea'
|
||||
},
|
||||
|
||||
{
|
||||
label: '是否启用',
|
||||
value: '',
|
||||
key: 'is_open',
|
||||
type: 'switch',
|
||||
className: 'item-l',
|
||||
list: [
|
||||
{
|
||||
label: '禁用',
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
label: '启用',
|
||||
value: '1'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
ruleForm: {}
|
||||
}
|
||||
]
|
||||
|
||||
export const userFormRules = {
|
||||
account: [
|
||||
@@ -452,3 +622,12 @@ export const stationFormRules = {
|
||||
}
|
||||
]
|
||||
}
|
||||
export const serviceApiFormRules = {
|
||||
name: [
|
||||
{
|
||||
trigger: 'blur',
|
||||
required: true,
|
||||
message: '请输入接口名称'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -108,7 +108,7 @@ const props = defineProps({
|
||||
default: () => {
|
||||
return {
|
||||
count: 1,
|
||||
pageSize: 10,
|
||||
pageSize: 5,
|
||||
page: 1
|
||||
}
|
||||
}
|
||||
@@ -410,30 +410,8 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
:deep(
|
||||
.ant-table-wrapper
|
||||
.ant-table.ant-table-bordered
|
||||
> .ant-table-container
|
||||
> .ant-table-body
|
||||
> table
|
||||
> tbody
|
||||
> tr
|
||||
> .ant-table-cell-fix-right-first::after
|
||||
) {
|
||||
// border-inline-end: 1px solid var(--theme-bg) !important;
|
||||
}
|
||||
:deep(
|
||||
.ant-table-wrapper
|
||||
.ant-table.ant-table-bordered
|
||||
> .ant-table-container
|
||||
> .ant-table-header
|
||||
> table
|
||||
> thead
|
||||
> tr
|
||||
> .ant-table-cell-fix-right-first::after
|
||||
) {
|
||||
// border-inline-end: 1px solid var(--theme-bg) !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
:deep(.ant-table-wrapper .ant-table-thead th.ant-table-column-has-sorters:hover) {
|
||||
background: var(--table-select) !important;
|
||||
|
||||
@@ -27,31 +27,28 @@
|
||||
</template>
|
||||
<template #treetable="item">
|
||||
<TreeTable
|
||||
class="treeTable"
|
||||
:columns="item.columns"
|
||||
:table-data="item.tableData"
|
||||
ref="treeTable"
|
||||
:transfer-dialog="transferDialog"
|
||||
@handleDetailPagesizeChange="handleDetailPagesizeChange"
|
||||
:table-option="{
|
||||
checkStrictly: false,
|
||||
selectTableData: item.selectTableData,
|
||||
scroll: { y: 500 }
|
||||
}"
|
||||
>
|
||||
<template #isQuery="record">
|
||||
<a-tag :color="record.isQuery ? 'green' : 'red'">{{
|
||||
record.isQuery ? '启用' : '禁用'
|
||||
}}</a-tag>
|
||||
<template #is_add="recordList">
|
||||
<a-checkbox v-model:checked="recordList.is_add"></a-checkbox>
|
||||
</template>
|
||||
<template #isEdit="record">
|
||||
<a-tag :color="record.isEdit ? 'green' : 'red'">{{
|
||||
record.isEdit ? '启用' : '禁用'
|
||||
}}</a-tag>
|
||||
<template #is_del="recordList">
|
||||
<a-checkbox v-model:checked="recordList.is_del"></a-checkbox>
|
||||
</template>
|
||||
<template #isControl="record">
|
||||
<a-tag :color="record.isControl ? 'green' : 'red'">{{
|
||||
record.isControl ? '启用' : '禁用'
|
||||
}}</a-tag>
|
||||
<template #is_edit="recordList">
|
||||
<a-checkbox v-model:checked="recordList.is_edit"></a-checkbox>
|
||||
</template>
|
||||
<template #isQuery="recordList">
|
||||
<a-checkbox v-model:checked="recordList.isQuery"></a-checkbox>
|
||||
</template>
|
||||
</TreeTable>
|
||||
</template>
|
||||
@@ -66,10 +63,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { userOptions, userFormRules,
|
||||
roleOptions,roleFormRules,
|
||||
stationOptions,stationFormRules
|
||||
|
||||
import {
|
||||
userOptions,
|
||||
userFormRules,
|
||||
roleOptions,
|
||||
roleFormRules,
|
||||
stationOptions,
|
||||
stationFormRules,
|
||||
serviceApiOptions,
|
||||
serviceApiFormRules
|
||||
} from '../../public/config/columnList'
|
||||
import DetailInfo from './DetailInfo.vue'
|
||||
import { postReq, getReq } from '@/request/api'
|
||||
@@ -111,9 +113,11 @@ export default {
|
||||
formRules: {},
|
||||
apiMethods: {
|
||||
// menu: 'menuConfirm',
|
||||
// permission: 'permissionConfirm',
|
||||
user: 'userConfirm',
|
||||
role: 'roleConfirm',
|
||||
station: 'stationConfirm',
|
||||
serviceApi: 'serviceApiConfirm',
|
||||
// permission: 'permissionConfirm',
|
||||
},
|
||||
form: {},
|
||||
ObjInfo: {},
|
||||
@@ -158,6 +162,11 @@ export default {
|
||||
this.detailInfos = stationOptions
|
||||
this.formRules = stationFormRules
|
||||
|
||||
break
|
||||
case 'serviceApi':
|
||||
this.detailInfos = serviceApiOptions
|
||||
this.formRules = serviceApiFormRules
|
||||
|
||||
break
|
||||
|
||||
default:
|
||||
@@ -286,21 +295,24 @@ export default {
|
||||
add: '/insertRole',
|
||||
edit: '/deleteRole'
|
||||
}
|
||||
const { selectedRowKeys } = this.$refs.treeTable[0]
|
||||
console.log(selectedRowKeys, 'selectedRowKeys')
|
||||
const paramsDate = {
|
||||
...this.form
|
||||
}
|
||||
if (this.action == 'edit') {
|
||||
paramsDate.role_id = this.record.role_id
|
||||
}
|
||||
|
||||
const res = await postReq(menuApi[this.action], paramsDate)
|
||||
if (res.errcode === 0) {
|
||||
setTimeout(() => {
|
||||
this.handleback()
|
||||
}, 1000)
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
// if (this.action == 'edit') {
|
||||
// paramsDate.role_id = this.record.role_id
|
||||
// }
|
||||
|
||||
// const res = await postReq(menuApi[this.action], paramsDate)
|
||||
// if (res.errcode === 0) {
|
||||
// setTimeout(() => {
|
||||
// this.handleback()
|
||||
// }, 1000)
|
||||
// } else {
|
||||
// throw res
|
||||
// }
|
||||
} catch (error) {
|
||||
console.log(error, 'roleConfirm')
|
||||
}
|
||||
@@ -330,6 +342,31 @@ export default {
|
||||
console.log(error, 'stationConfirm')
|
||||
}
|
||||
},
|
||||
async serviceApiConfirm() {
|
||||
try {
|
||||
const menuApi = {
|
||||
add: '/insertServiceApi',
|
||||
edit: '/updateServiceApi'
|
||||
}
|
||||
const paramsDate = {
|
||||
...this.form
|
||||
}
|
||||
if (this.action == 'edit') {
|
||||
paramsDate.api_id = this.record.api_id
|
||||
}
|
||||
|
||||
const res = await postReq(menuApi[this.action], paramsDate)
|
||||
if (res.errcode === 0) {
|
||||
setTimeout(() => {
|
||||
this.handleback()
|
||||
}, 1000)
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error, 'stationConfirm')
|
||||
}
|
||||
},
|
||||
handleback() {
|
||||
this.$emit('operateForm', 'back')
|
||||
},
|
||||
@@ -370,4 +407,8 @@ export default {
|
||||
:deep(.ant-picker) {
|
||||
color: var(--theme-text-default) !important;
|
||||
}
|
||||
|
||||
:deep(.treeTable) {
|
||||
width: 550px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,28 @@
|
||||
<template>
|
||||
<div class="map">
|
||||
<div>
|
||||
<div class="icon1" @click="showModal(testVal)"></div>
|
||||
<div class="icon"></div>
|
||||
|
||||
<div ref="mapContent" class="mapContent" >
|
||||
<tdt-map
|
||||
ref="tiandituMap"
|
||||
:center="center"
|
||||
:zoom="zoom"
|
||||
@init="init"
|
||||
map-style="black"
|
||||
class="amap-box"
|
||||
:mid="'amap-vue'"
|
||||
>
|
||||
<tdt-marker
|
||||
v-for="marker in markers"
|
||||
:position="[marker.lon, marker.lat]"
|
||||
:key="marker.id"
|
||||
:icon="marker.iconMap"
|
||||
style="width: 20px; height: 20px"
|
||||
@click="clickArrayMarker(marker)"
|
||||
:title="marker.name"
|
||||
>
|
||||
</tdt-marker>
|
||||
</tdt-map>
|
||||
</div>
|
||||
<div ref="mapContent"></div>
|
||||
<a-modal
|
||||
class="modal"
|
||||
ref="modal"
|
||||
@@ -16,10 +34,7 @@
|
||||
:mask="true"
|
||||
>
|
||||
<template #closeIcon>
|
||||
<i
|
||||
class="iconfont icon-guanbi"
|
||||
style="font-size:20px; cursor: pointer; color: #fff; "
|
||||
/>
|
||||
<i class="iconfont icon-guanbi" style="font-size: 20px; cursor: pointer; color: #fff" />
|
||||
</template>
|
||||
<div class="modal-content">
|
||||
<div class="home-modal">
|
||||
@@ -32,39 +47,133 @@
|
||||
<script>
|
||||
import { getReq, postReq } from '@/request/api'
|
||||
import Modal from '@/components/Home/Modal.vue'
|
||||
import { loadTMap } from '@/utils/loadTMap'
|
||||
import {gcj02ToWgs84} from '@/utils/gcj02ToWgs84'
|
||||
import { TdtMap } from 'vue-tianditu'
|
||||
|
||||
export default {
|
||||
name: 'Map',
|
||||
components: { Modal },
|
||||
components: { Modal, TdtMap },
|
||||
|
||||
data() {
|
||||
return {
|
||||
center: [],
|
||||
// zoom: 16,
|
||||
zoom: 2,
|
||||
map: null,
|
||||
currentMarker: {},
|
||||
showCtrModal: false,
|
||||
markers: [],
|
||||
|
||||
testVal: {
|
||||
name: '场站211',
|
||||
id: '2'
|
||||
},
|
||||
changeStationId:''
|
||||
changeStationId: '',
|
||||
targetKey: '98d875e39cf0ebab01e56a0f86c5ed44'
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
mounted() {
|
||||
this.initMap()
|
||||
// this.getMarkList()
|
||||
},
|
||||
methods: {
|
||||
async showModal(currentVal) {
|
||||
this.changeStationId=currentVal.id
|
||||
console.log(currentVal, 'cccccccccccccccccccccc')
|
||||
this.showCtrModal = true
|
||||
init(map) {
|
||||
this.map = map
|
||||
// console.log(this.map.getCenter(),"this.map.getCenter()")
|
||||
this.map.centerAndZoom(new T.LngLat(116.404, 39.915), 12);
|
||||
// 监听地图加载完成事件
|
||||
this.map.addEventListener('load', () => {
|
||||
const c= this.map.getCenter()
|
||||
this.center =gcj02ToWgs84(c);
|
||||
console.log('GCJ02坐标:', this.center);
|
||||
});
|
||||
this.getMarkList()
|
||||
},
|
||||
async getMarkList() {
|
||||
try {
|
||||
const query = {
|
||||
// station_id:this.changeStationId
|
||||
let query = {
|
||||
role_id: localStorage.getItem('user')[0].role_id
|
||||
}
|
||||
const res = await postReq(query, '')
|
||||
if (res.code == 200) {
|
||||
this.modalInfo = res.data.records
|
||||
const res = await getReq('/queryStationList', query)
|
||||
if (res.errcode === 0) {
|
||||
this.markers = res.data.map((item) => {
|
||||
console.log(gcj02ToWgs84(+item.lon, +item.lat),"gcj02ToWgs84(+item.lon, +item.lat)")
|
||||
let wgs = +item.lat && +item.lon ? gcj02ToWgs84(+item.lon, +item.lat) : [null, null]
|
||||
return {
|
||||
...item,
|
||||
lon: wgs[0],
|
||||
lat: wgs[1],
|
||||
iconMap: !+item.status
|
||||
? require('../../assets/home/homeIcon1.png')
|
||||
: require('../../assets/home/homeIcon.png')
|
||||
}
|
||||
})
|
||||
console.log("this.markers ",this.markers )
|
||||
} else {
|
||||
this.markers = []
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error,'eeeeeeeeeeeeeeee')
|
||||
}
|
||||
},
|
||||
async initMap() {
|
||||
try {
|
||||
const [mapKey] = await Promise.all([this.getSysConfig('map-key')])
|
||||
// const gcj02LngLat=map.getCenter()
|
||||
// console.log(gcj02LngLat.getLng())
|
||||
console.log(mapKey,"mapKey")
|
||||
await loadTMap(mapKey)
|
||||
|
||||
|
||||
// 创建地图实例（需要HTML中存在id为mapContainer的元素）
|
||||
// this.map = new T.Map("amap-vue");
|
||||
// // this.map.centerAndZoom(new T.LngLat(116.404, 39.915), 12); // 初始中心点
|
||||
|
||||
// const centerGcj02 = this.map.getCenter();
|
||||
// console.log("GCJ02坐标:", centerGcj02.getLng(), centerGcj02.getLat());
|
||||
// const centerWgs84=gcj02ToWgs84(centerGcj02.getLng(),centerGcj02.getLat())
|
||||
|
||||
|
||||
|
||||
// this.center =[]
|
||||
} catch (err) {
|
||||
console.error('天地图加载失败:', err)
|
||||
}
|
||||
},
|
||||
async getSysConfig() {
|
||||
let sysConfig
|
||||
try {
|
||||
const query = {}
|
||||
const res = await getReq('/', query)
|
||||
if (res.errcode === 0) {
|
||||
sysConfig = res.data.value
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err, 'eeeeeeeeeeeeeeeerr')
|
||||
} catch (error) {
|
||||
sysConfig = this.targetKey
|
||||
}
|
||||
return sysConfig
|
||||
},
|
||||
async clickArrayMarker(currentVal) {
|
||||
this.changeStationId = currentVal.station_id
|
||||
console.log(currentVal, 'cccccccccccccccccccccc')
|
||||
this.showCtrModal = true
|
||||
// try {
|
||||
// const query = {
|
||||
// // station_id:this.changeStationId
|
||||
// }
|
||||
// const res = await postReq(query, '')
|
||||
// if (res.errcode === 0) {
|
||||
// this.modalInfo = res.data.records
|
||||
// } else {
|
||||
// throw res
|
||||
// }
|
||||
// } catch (err) {
|
||||
// console.log(err, 'eeeeeeeeeeeeeeeerr')
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -73,6 +182,10 @@ export default {
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.mapContent{
|
||||
height:100%;
|
||||
}
|
||||
.icon1 {
|
||||
width: 32px;
|
||||
height: 80px;
|
||||
@@ -148,5 +261,9 @@ export default {
|
||||
.home-modal {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.tdt-marker-icon){
|
||||
height:auto!important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -9,8 +9,14 @@
|
||||
</div>
|
||||
<component
|
||||
:is="item.componentId"
|
||||
:props-total="item.infoKey=='prefab'? modalInfo.prefabTotal: modalInfo.allTotal"
|
||||
:props-info="modalInfo[item.infoKey]"
|
||||
:props-total="
|
||||
['prefab', 'dataTotal'].includes(item.infoKey)
|
||||
? item.key == 'prefab'
|
||||
? modalInfo.prefabTotal
|
||||
: modalInfo.dataTotal
|
||||
: modalInfo.allTotal
|
||||
"
|
||||
></component>
|
||||
</div>
|
||||
</div>
|
||||
@@ -71,7 +77,7 @@ export default {
|
||||
title: '运行信息',
|
||||
class: 'operation-status',
|
||||
componentId: OperationalInfo,
|
||||
infoKey: ''
|
||||
infoKey: 'dataTotal'
|
||||
},
|
||||
{
|
||||
title: '场站收益情况',
|
||||
@@ -96,7 +102,7 @@ export default {
|
||||
title: '环境信息',
|
||||
class: 'envInfo',
|
||||
componentId: EnvInfo,
|
||||
infoKey: ''
|
||||
infoKey: 'dataTotal'
|
||||
}
|
||||
],
|
||||
sysName: '',
|
||||
@@ -115,7 +121,8 @@ export default {
|
||||
await Promise.all([
|
||||
this.getStatTotalList(),
|
||||
this.queryStationInfo(),
|
||||
this.getStatDayList(1),
|
||||
this.queryStationData(),
|
||||
this.getStatDayList(1)
|
||||
])
|
||||
},
|
||||
|
||||
@@ -145,15 +152,33 @@ export default {
|
||||
this.modalInfo.allTotal = {}
|
||||
}
|
||||
},
|
||||
// 查询场站实时数据
|
||||
async queryStationData() {
|
||||
try {
|
||||
// station_id：场站ID
|
||||
|
||||
const query = {
|
||||
station_id: this.stationId
|
||||
}
|
||||
const res = await getReq('/queryStationData', query)
|
||||
if (res.errcode === 0) {
|
||||
this.modalInfo.dataTotal = res.data
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
this.modalInfo.dataTotal = {}
|
||||
}
|
||||
},
|
||||
// 查询场站信息
|
||||
async queryStationInfo() {
|
||||
try {
|
||||
// station_id：场站ID
|
||||
|
||||
const query = {
|
||||
station_id: this.stationId,
|
||||
station_id: this.stationId
|
||||
}
|
||||
const res = await getReq('//queryStationInfo', query)
|
||||
const res = await getReq('/queryStationInfo', query)
|
||||
if (res.errcode === 0) {
|
||||
this.modalInfo.prefabTotal = res.data
|
||||
} else {
|
||||
|
||||
@@ -30,9 +30,29 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
coolingList: [
|
||||
{
|
||||
label: '关机',
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
label: '开机',
|
||||
value: '1'
|
||||
}
|
||||
],
|
||||
aircList: [
|
||||
{
|
||||
label: '关机',
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
label: '开机',
|
||||
value: '1'
|
||||
}
|
||||
],
|
||||
list: [
|
||||
{
|
||||
key: 'key1',
|
||||
key: 'coolingStatus',
|
||||
value: '制冷',
|
||||
d: '',
|
||||
label: '冷机',
|
||||
@@ -41,7 +61,7 @@ export default {
|
||||
color: '#F69B52'
|
||||
},
|
||||
{
|
||||
key: 'key2',
|
||||
key: 'aircStatus',
|
||||
value: '开机',
|
||||
d: '',
|
||||
label: '空调',
|
||||
@@ -50,7 +70,7 @@ export default {
|
||||
color: '#9BD801'
|
||||
},
|
||||
{
|
||||
key: 'key3',
|
||||
key: 'envTemp',
|
||||
value: 24,
|
||||
d: '℃',
|
||||
label: '环境温度',
|
||||
@@ -59,7 +79,7 @@ export default {
|
||||
color: '#3DFEFA'
|
||||
},
|
||||
{
|
||||
key: 'key4',
|
||||
key: 'envhum',
|
||||
value: 26,
|
||||
d: '%',
|
||||
label: '环境湿度',
|
||||
@@ -70,20 +90,27 @@ export default {
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
leftList() {
|
||||
return this.list.filter((_, index) => index % 2 === 0).slice(0, 3) // 左列取前3个偶数索引
|
||||
},
|
||||
rightList() {
|
||||
return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
propsTotal: {
|
||||
handler(newVal, oldVal) {
|
||||
if (newVal !== oldVal) {
|
||||
this.list.forEach((item) => {
|
||||
console.log(this.propsTotal,this.propsTotal[item.key],"this.propsTotal[item.key]")
|
||||
if (item.key == 'coolingStatus') {
|
||||
console.log(this.coolingList.find(
|
||||
(e) => e.value == this.propsTotal[item.key]
|
||||
))
|
||||
item.value = this.coolingList.find(
|
||||
(e) => e.value == this.propsTotal[item.key]
|
||||
).label
|
||||
} else if (item.key == 'aircStatus') {
|
||||
item.value = this.aircList.map(
|
||||
(e) => e.value == this.propsTotal[item.key]
|
||||
).label
|
||||
} else {
|
||||
item.value = this.propsTotal[item.key]
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -29,24 +29,24 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
// {
|
||||
// key: 'tianshu',
|
||||
// value: 26,
|
||||
// d: '℃',
|
||||
// label: '舱内温度',
|
||||
// class: 'item-1',
|
||||
// iconPath: require('@/assets/home/wendu.png')
|
||||
// },
|
||||
// {
|
||||
// key: 'shouyi',
|
||||
// value: 25,
|
||||
// d: '%',
|
||||
// label: '舱内湿度',
|
||||
// class: 'item-2',
|
||||
// iconPath: require('@/assets/home/shidu.png')
|
||||
// },
|
||||
{
|
||||
key: 'tianshu',
|
||||
value: 26,
|
||||
d: '℃',
|
||||
label: '舱内温度',
|
||||
class: 'item-1',
|
||||
iconPath: require('@/assets/home/wendu.png')
|
||||
},
|
||||
{
|
||||
key: 'shouyi',
|
||||
value: 25,
|
||||
d: '%',
|
||||
label: '舱内湿度',
|
||||
class: 'item-2',
|
||||
iconPath: require('@/assets/home/shidu.png')
|
||||
},
|
||||
{
|
||||
key: 'shuliang',
|
||||
key: 'voltage',
|
||||
value: 24,
|
||||
d: 'V',
|
||||
label: '电压',
|
||||
@@ -54,7 +54,7 @@ export default {
|
||||
iconPath: require('@/assets/home/dianya.png')
|
||||
},
|
||||
{
|
||||
key: 'shuliang',
|
||||
key: 'current',
|
||||
value: 26,
|
||||
d: 'A',
|
||||
label: '电流',
|
||||
@@ -62,7 +62,7 @@ export default {
|
||||
iconPath: require('@/assets/home/dianliu.png')
|
||||
},
|
||||
{
|
||||
key: 'fadianliang',
|
||||
key: 'power',
|
||||
value: 20,
|
||||
d: 'w',
|
||||
label: '功率',
|
||||
@@ -70,7 +70,7 @@ export default {
|
||||
iconPath: require('@/assets/home/gonglv.png')
|
||||
},
|
||||
{
|
||||
key: 'rongliang',
|
||||
key: 'powerFactor',
|
||||
value: 100,
|
||||
d: '',
|
||||
label: '功率因数',
|
||||
@@ -81,12 +81,7 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
leftList() {
|
||||
return this.list.filter((_, index) => index % 2 === 0).slice(0, 3) // 左列取前3个偶数索引
|
||||
},
|
||||
rightList() {
|
||||
return this.list.filter((_, index) => index % 2 !== 0).slice(0, 3) // 右列取前3个奇数索引
|
||||
}
|
||||
|
||||
},
|
||||
watch: {
|
||||
propsTotal: {
|
||||
|
||||
528
web/src/components/TreeTable.vue
Normal file
528
web/src/components/TreeTable.vue
Normal file
@@ -0,0 +1,528 @@
|
||||
<template>
|
||||
<div class="treetable" ref="treetable">
|
||||
<a-table
|
||||
bordered
|
||||
:loading="loading"
|
||||
:scroll="tableOption.scroll"
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
:pagination="false"
|
||||
:row-class-name="(record, index) => rowClassName(record, index)"
|
||||
row-key="id"
|
||||
size="middle"
|
||||
:row-selection="rowSelection"
|
||||
:indent-size="30"
|
||||
:check-strictly="false"
|
||||
@resizeColumn="handleResizeColumn"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.scopedSlots">
|
||||
<slot
|
||||
v-bind="record"
|
||||
:name="column.scopedSlots ? column.scopedSlots.customRender : ''"
|
||||
></slot>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
columns: { type: Array },
|
||||
tableData: { type: Array },
|
||||
tableOption: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
loading: false,
|
||||
page: true,
|
||||
align: 'center',
|
||||
expand: true,
|
||||
select: true
|
||||
// scroll: { y: 600 },
|
||||
}
|
||||
}
|
||||
},
|
||||
paginationOption: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 1
|
||||
}
|
||||
}
|
||||
},
|
||||
selectField: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
|
||||
rowClick: {
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
newPaginationOption: {},
|
||||
newColumns: [],
|
||||
defPageOpt: {
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 1
|
||||
},
|
||||
newPageOptions: {},
|
||||
selectedRowKeys: [],
|
||||
realColumns: [],
|
||||
realTableData: [],
|
||||
selectedRows: {},
|
||||
defaultTabOpt: {
|
||||
page: true,
|
||||
align: 'center',
|
||||
expand: false,
|
||||
select: true
|
||||
},
|
||||
newTableOpt: {},
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
scroll: { y: 100 }
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
rowSelection() {
|
||||
const { selectedRowKeys } = this
|
||||
return {
|
||||
checkStrictly: this.tableOption.checkStrictly,
|
||||
selectedRowKeys,
|
||||
type: this.tableOption.type,
|
||||
onChange: (selectedRowKeys, selectedRows) => {
|
||||
this.onSelectChange(selectedRowKeys, selectedRows)
|
||||
},
|
||||
hideDefaultSelections: true,
|
||||
onSelect: (record, selected) => {
|
||||
this.onSelect(record, selected)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectField: {
|
||||
handler(n, o) {
|
||||
this.handlerTableData(n)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
paginationOption: {
|
||||
handler(n, o) {
|
||||
this.defPageOpt = { ...this.defPageOpt, ...n }
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
tableOption: {
|
||||
handler(n, o) {
|
||||
this.newTableOpt = { ...this.defaultTabOpt, ...n }
|
||||
if (n.selectTableData && n.selectTableData.length > 0) {
|
||||
this.selectedRowKeys = n.selectTableData
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.scroll.y = this.$refs.treetable.offsetHeight - 70
|
||||
},
|
||||
methods: {
|
||||
handleResizeColumn(w, col) {
|
||||
col.width = w
|
||||
},
|
||||
|
||||
onSelectChange(selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.selectedRows = selectedRows[selectedRows.length - 1]
|
||||
this.$emit('getSelectedIds', selectedRowKeys)
|
||||
},
|
||||
onSelect(record, selected) {
|
||||
const selectrows = [record.id]
|
||||
// record.hasOwnProperty("children") &&
|
||||
if (record.children && record.children.length) {
|
||||
const generator = (record) => {
|
||||
record.forEach((item) => {
|
||||
selectrows.push(item.id)
|
||||
if (item.children && item.children.length > 0) {
|
||||
generator(item.children)
|
||||
}
|
||||
})
|
||||
}
|
||||
generator(record.children)
|
||||
}
|
||||
const newselect = this.selectedRowKeys.filter((item) => !selectrows.includes(item))
|
||||
|
||||
selected
|
||||
? (this.selectedRowKeys = Array.from(new Set([...this.selectedRowKeys, ...selectrows])))
|
||||
: (this.selectedRowKeys = newselect)
|
||||
},
|
||||
|
||||
handlerTableData(n) {
|
||||
if (n.length == 0) {
|
||||
this.newColumns = this.columns
|
||||
} else {
|
||||
this.newColumns = []
|
||||
this.selectField.forEach((i) => {
|
||||
this.columns.forEach((e) => {
|
||||
if (i == e.dataIndex) {
|
||||
this.newColumns.push(e)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
rowClassName(record, index) {
|
||||
return 'table-row'
|
||||
},
|
||||
// expandIcon(props) {
|
||||
// // if (props.record.descriptions) {
|
||||
// // if (props.expanded) {
|
||||
// // return (
|
||||
// // <a
|
||||
// // style="color: 'black',margin-right:0px"
|
||||
// // onClick={(e) => {
|
||||
// // props.onExpand(props.record, e)
|
||||
// // }}
|
||||
// // >
|
||||
// // <DownOutlined />{' '}
|
||||
// // </a>
|
||||
// // )
|
||||
// // } else {
|
||||
// // return (
|
||||
// // <span
|
||||
// // style="color: 'black' ,margin-right:0px"
|
||||
// // onClick={(e) => {
|
||||
// // props.onExpand(props.record, e)
|
||||
// // }}
|
||||
// // >
|
||||
// // <a-icon type="right" />
|
||||
// // </span>
|
||||
// // )
|
||||
// // }
|
||||
// // } else {
|
||||
// // return null
|
||||
// // }
|
||||
// },
|
||||
onSizeChange(current, pageSize) {
|
||||
this.defPageOpt.pageSize = pageSize
|
||||
this.defPageOpt.current = 1
|
||||
this.$emit('handlePagesizeChange', this.defPageOpt)
|
||||
},
|
||||
onChange(pageNumber) {
|
||||
this.defPageOpt.current = pageNumber
|
||||
this.$emit('handlePagesizeChange', this.defPageOpt)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.ant-table-body) {
|
||||
.ant-table-cell {
|
||||
background: var(--theme-bg) !important;
|
||||
}
|
||||
.ant-table-row-selected {
|
||||
td {
|
||||
background-color: var(--table-select) !important;
|
||||
}
|
||||
}
|
||||
.ant-table-cell-fix-right.ant-table-cell-fix-right-first,
|
||||
.ant-table-cell-fix-left {
|
||||
box-shadow: none !important;
|
||||
padding: 8px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.ant-table-row-expand-icon.ant-table-row-expand-icon-collapsed,
|
||||
.ant-table-row-expand-icon.ant-table-row-expand-icon-expanded {
|
||||
background-color: var(--table-header-bg) !important;
|
||||
}
|
||||
}
|
||||
.treetable {
|
||||
background-color: var(--theme-bg-default);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 10px;
|
||||
// margin-bottom: 10px;
|
||||
min-width: 420px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
:deep(.ant-table) {
|
||||
border-radius:20px 20px 0 0 !important;
|
||||
overflow: hidden; /* 确保圆角生效 */
|
||||
}
|
||||
:deep(.ant-table-wrapper .ant-table.ant-table-bordered >.ant-table-container){
|
||||
border-inline-start:none!important;
|
||||
}
|
||||
:deep(.ant-table-wrapper .ant-table-cell){
|
||||
background:none!important;
|
||||
}
|
||||
:deep(.ant-table-thead ){
|
||||
background: linear-gradient(0deg, rgba(61, 254, 250, 0.2), rgba(61, 254, 250, 0.2)),
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgba(61, 254, 250, 0) 0%,
|
||||
rgba(0, 255, 251, 0.15) 50.17%,
|
||||
rgba(61, 254, 250, 0) 100%
|
||||
)!important;
|
||||
}
|
||||
:deep(.ant-table-thead > tr > th) {
|
||||
border-inline: 1px solid transparent !important;
|
||||
background: transparent;
|
||||
color: #fff !important;
|
||||
border-bottom: none !important; /* 可选：去除底部边框 */
|
||||
}
|
||||
|
||||
:deep(.ant-pagination) {
|
||||
.ant-pagination-item-link {
|
||||
color: #fff !important;
|
||||
height: 100% !important;
|
||||
display: block !important;
|
||||
}
|
||||
.ant-pagination-prev,
|
||||
.ant-pagination-next {
|
||||
background: transparent !important;
|
||||
color: #fff !important;
|
||||
border: 1px solid $page-border;
|
||||
button {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.ant-select-selector {
|
||||
border: none !important;
|
||||
}
|
||||
.ant-select-arrow {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
span.ant-input-affix-wrapper,
|
||||
.ant-select,
|
||||
.ant-picker {
|
||||
width: 110px !important;
|
||||
}
|
||||
.ant-select-selection-item {
|
||||
color: #fff !important;
|
||||
border: 1px solid $page-border;
|
||||
}
|
||||
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
.ant-pagination-total-text,
|
||||
.ant-pagination-options-quick-jumper {
|
||||
color: #fff !important;
|
||||
margin-inline-end: 9px !important;
|
||||
}
|
||||
.ant-pagination-options-quick-jumper input {
|
||||
background-color: transparent !important;
|
||||
// border: none !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
.ant-pagination-options .ant-pagination-options-size-changer .ant-select-selector {
|
||||
padding: 0px !important;
|
||||
color: #fff !important;
|
||||
background-color: transparent !important;
|
||||
|
||||
.ant-select-selection-item {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
.ant-select-dropdown {
|
||||
top: -210px !important;
|
||||
}
|
||||
.ant-pagination-item {
|
||||
&:not(.ant-pagination-item-active):hover {
|
||||
background: #1c797a !important;
|
||||
}
|
||||
a {
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
background: #1c797a !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination-item-active {
|
||||
border: 1px solid transparent;
|
||||
color: #fff;
|
||||
background: #1c797a !important;
|
||||
}
|
||||
}
|
||||
:deep(
|
||||
.ant-table-wrapper
|
||||
.ant-table.ant-table-bordered
|
||||
> .ant-table-container
|
||||
> .ant-table-header
|
||||
> table
|
||||
) {
|
||||
border-top: none !important;
|
||||
border-inline-start: none !important;
|
||||
}
|
||||
:deep(.ant-checkbox-checked .ant-checkbox-inner) {
|
||||
background-color: var(--table-header-bg) !important;
|
||||
border: none !important;
|
||||
}
|
||||
:deep(.ant-checkbox-indeterminate .ant-checkbox-inner:after) {
|
||||
background-color: var(--table-header-bg) !important;
|
||||
}
|
||||
:deep(
|
||||
.ant-table.ant-table-bordered
|
||||
> .ant-table-container
|
||||
> .ant-table-header
|
||||
> table
|
||||
> thead
|
||||
> tr
|
||||
> th
|
||||
) {
|
||||
&:nth-last-child(2) {
|
||||
border-inline-end: 1px solid var(--table-header-bg) !important;
|
||||
// left: 1px !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-table-wrapper .ant-table.ant-table-bordered > .ant-table-container) {
|
||||
// tr>th:nth-last-child(){
|
||||
border-inline-start: none !important;
|
||||
// }
|
||||
}
|
||||
:deep(.ant-table-wrapper) {
|
||||
.ant-table-cell-scrollbar,
|
||||
.ant-table.ant-table-bordered > .ant-table-container {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
// .ant-table {
|
||||
// background-color: var(--theme-bg) !important;
|
||||
// }
|
||||
}
|
||||
|
||||
::v-deep .ant-table-thead > tr > th {
|
||||
border-inline-end: 1.5px solid var(--theme-bg) !important;
|
||||
background: var(--table-header-bg);
|
||||
color: var(--theme-text-default);
|
||||
border-bottom: none;
|
||||
&:last-child {
|
||||
border-inline-end: 1.5px solid var(--table-header-bg) !important;
|
||||
}
|
||||
&:nth-last-child(2) {
|
||||
border-inline-end: 1.5px solid var(--table-header-bg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-table-container > .ant-table-content > table) {
|
||||
border-inline-start: 1px solid var(--theme-bg) !important;
|
||||
}
|
||||
:deep(.ant-pagination-item-link) {
|
||||
color: var(--theme-text-default) !important;
|
||||
|
||||
height: 100% !important;
|
||||
display: block !important;
|
||||
// border: none !important;
|
||||
}
|
||||
:deep(.ant-table-wrapper .ant-table.ant-table-bordered >.ant-table-container >.ant-table-content >table){
|
||||
border-top:none;
|
||||
}
|
||||
:deep(.ant-table-tbody) {
|
||||
color: #fff!important;
|
||||
> tr {
|
||||
&:hover {
|
||||
> td {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
td {
|
||||
border: 1px solid transparent !important; /* 第一行单元格边框为红色 */
|
||||
}
|
||||
}
|
||||
td.ant-table-cell.ant-table-cell-row-hover {
|
||||
// background-color: var(--theme-bg) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 10px;
|
||||
|
||||
min-width: 420px;
|
||||
.total {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .ant-table-thead > tr > th {
|
||||
border-inline-end: 1px solid var(--theme-bg) !important;
|
||||
background: var(--table-header-bg);
|
||||
color: var(--theme-text-default);
|
||||
border-bottom: none;
|
||||
&:last-child {
|
||||
border-inline-end: 1px solid var(--table-header-bg) !important;
|
||||
}
|
||||
&:nth-last-child(2) {
|
||||
border-inline-end: 1px solid var(--table-header-bg) !important;
|
||||
}
|
||||
}
|
||||
:deep(.ant-table-wrapper .ant-table.ant-table-bordered >.ant-table-container >.ant-table-body >table >tbody>tr>td){
|
||||
border-inline-end: none!important;
|
||||
}
|
||||
:deep(.ant-table-thead) {
|
||||
background: var(--table-header-bg);
|
||||
}
|
||||
|
||||
:deep(.ant-table-tbody) {
|
||||
> tr {
|
||||
&:hover {
|
||||
> .ant-table-cell {
|
||||
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-table-wrapper) {
|
||||
.ant-table-cell-scrollbar,
|
||||
.ant-table.ant-table-bordered > .ant-table-container {
|
||||
box-shadow: none !important;
|
||||
|
||||
&>.ant-table-body >table >tbody>tr>td{
|
||||
border-bottom: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-table-wrapper .ant-table) {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
:deep(.ant-table-wrapper .ant-table-thead th.ant-table-column-has-sorters:hover) {
|
||||
background: var(--table-select) !important;
|
||||
}
|
||||
</style>
|
||||
@@ -15,11 +15,13 @@ import { message } from 'ant-design-vue'
|
||||
import VueTianditu from 'vue-tianditu'
|
||||
import SearchBox from '@/components/SearchBox.vue'
|
||||
import ComTable from '@/components/ComTable.vue'
|
||||
import TreeTable from '@/components/TreeTable.vue'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.component('SearchBox', SearchBox)
|
||||
app.component('ComTable', ComTable)
|
||||
app.component('TreeTable', TreeTable)
|
||||
|
||||
app.config.globalProperties.$echarts = echarts // 挂载到全局属性
|
||||
app.config.globalProperties.$setWidth = setWidth // 挂载到全局属性
|
||||
|
||||
@@ -60,7 +60,9 @@ export const routes = [
|
||||
{
|
||||
name: 'permission',
|
||||
path: 'permission',
|
||||
title: '权限管理'
|
||||
title: '权限管理',
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "system" */ '@/views/system/permission.vue')
|
||||
},
|
||||
{
|
||||
name: 'station',
|
||||
@@ -71,7 +73,8 @@ export const routes = [
|
||||
{
|
||||
name: 'service',
|
||||
path: 'service',
|
||||
title: '服务管理'
|
||||
title: '服务管理',
|
||||
component: () => import(/* webpackChunkName: "system" */ '@/views/system/service.vue')
|
||||
},
|
||||
{
|
||||
path: 'policy',
|
||||
|
||||
@@ -14,8 +14,8 @@ const btnList = [
|
||||
// isQuery: true;
|
||||
// }
|
||||
function getBtns(arr) {
|
||||
const permissions =
|
||||
JSON.parse(localStorage.getItem('user')).userExtend.role.permissionList[0] || {}
|
||||
// const permissions =
|
||||
// JSON.parse(localStorage.getItem('user')) || {}
|
||||
const btns = []
|
||||
btnList.forEach((item) => {
|
||||
if (arr.includes(item.label)) {
|
||||
|
||||
@@ -6,7 +6,7 @@ const colWidth = [
|
||||
},
|
||||
{
|
||||
label: '名称',
|
||||
width: 200,
|
||||
width: 150,
|
||||
align: 'left',
|
||||
sorter: (a, b) => {
|
||||
return a.name.localeCompare(b.name)
|
||||
@@ -70,7 +70,7 @@ const colWidth = [
|
||||
label: '操作',
|
||||
align: 'center',
|
||||
width: 200,
|
||||
fixed: 'right',
|
||||
// fixed: 'right',
|
||||
resizable: false
|
||||
}
|
||||
]
|
||||
|
||||
@@ -1,80 +1,80 @@
|
||||
// /**
|
||||
// * 判断是否在中国境外
|
||||
// */
|
||||
// function outOfChina(lng, lat) {
|
||||
// return !(lng >= 72.004 && lng <= 137.8347 && lat >= 0.8293 && lat <= 55.8271)
|
||||
// }
|
||||
/**
|
||||
* 判断是否在中国境外
|
||||
*/
|
||||
function outOfChina(lng, lat) {
|
||||
return !(lng >= 72.004 && lng <= 137.8347 && lat >= 0.8293 && lat <= 55.8271)
|
||||
}
|
||||
|
||||
// /**
|
||||
// * 辅助函数：纬度转换
|
||||
// */
|
||||
// function _transformLat(x, y) {
|
||||
// let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
|
||||
// ret += ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0) / 3.0
|
||||
// ret += ((20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin((y / 3.0) * Math.PI)) * 2.0) / 3.0
|
||||
// ret +=
|
||||
// ((160.0 * Math.sin((y / 12.0) * Math.PI) + 320 * Math.sin((y * Math.PI) / 30.0)) * 2.0) / 3.0
|
||||
// return ret
|
||||
// }
|
||||
/**
|
||||
* 辅助函数：纬度转换
|
||||
*/
|
||||
function _transformLat(x, y) {
|
||||
let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x))
|
||||
ret += ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0) / 3.0
|
||||
ret += ((20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin((y / 3.0) * Math.PI)) * 2.0) / 3.0
|
||||
ret +=
|
||||
((160.0 * Math.sin((y / 12.0) * Math.PI) + 320 * Math.sin((y * Math.PI) / 30.0)) * 2.0) / 3.0
|
||||
return ret
|
||||
}
|
||||
|
||||
// /**
|
||||
// * 辅助函数：经度转换
|
||||
// */
|
||||
// function _transformLng(x, y) {
|
||||
// let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
|
||||
// ret += ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0) / 3.0
|
||||
// ret += ((20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin((x / 3.0) * Math.PI)) * 2.0) / 3.0
|
||||
// ret +=
|
||||
// ((150.0 * Math.sin((x / 12.0) * Math.PI) + 300.0 * Math.sin((x / 30.0) * Math.PI)) * 2.0) / 3.0
|
||||
// return ret
|
||||
// }
|
||||
/**
|
||||
* 辅助函数：经度转换
|
||||
*/
|
||||
function _transformLng(x, y) {
|
||||
let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x))
|
||||
ret += ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0) / 3.0
|
||||
ret += ((20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin((x / 3.0) * Math.PI)) * 2.0) / 3.0
|
||||
ret +=
|
||||
((150.0 * Math.sin((x / 12.0) * Math.PI) + 300.0 * Math.sin((x / 30.0) * Math.PI)) * 2.0) / 3.0
|
||||
return ret
|
||||
}
|
||||
|
||||
// /**
|
||||
// * GCJ-02 (高德/腾讯坐标系) 转 WGS-84 (GPS原始坐标系)
|
||||
// * @param {number} lng GCJ-02经度
|
||||
// * @param {number} lat GCJ-02纬度
|
||||
// * @returns {number[]} [WGS-84经度, WGS-84纬度]
|
||||
// */
|
||||
// export function gcj02ToWgs84(lng, lat) {
|
||||
// // 判断是否在中国境内（简化版，实际需更完整判断）
|
||||
// if (outOfChina(lng, lat)) {
|
||||
// return [lng, lat] // 境外坐标不转换
|
||||
// }
|
||||
/**
|
||||
* GCJ-02 (高德/腾讯坐标系) 转 WGS-84 (GPS原始坐标系)
|
||||
* @param {number} lng GCJ-02经度
|
||||
* @param {number} lat GCJ-02纬度
|
||||
* @returns {number[]} [WGS-84经度, WGS-84纬度]
|
||||
*/
|
||||
export function gcj02ToWgs84(lng, lat) {
|
||||
// 判断是否在中国境内（简化版，实际需更完整判断）
|
||||
if (outOfChina(lng, lat)) {
|
||||
return [lng, lat] // 境外坐标不转换
|
||||
}
|
||||
|
||||
// let dlat = _transformLat(lng - 105.0, lat - 35.0)
|
||||
// let dlng = _transformLng(lng - 105.0, lat - 35.0)
|
||||
let dlat = _transformLat(lng - 105.0, lat - 35.0)
|
||||
let dlng = _transformLng(lng - 105.0, lat - 35.0)
|
||||
|
||||
// const radlat = (lat / 180.0) * Math.PI
|
||||
// let magic = Math.sin(radlat)
|
||||
// magic = 1 - 0.00669342162296594323 * magic * magic
|
||||
// const sqrtmagic = Math.sqrt(magic)
|
||||
const radlat = (lat / 180.0) * Math.PI
|
||||
let magic = Math.sin(radlat)
|
||||
magic = 1 - 0.00669342162296594323 * magic * magic
|
||||
const sqrtmagic = Math.sqrt(magic)
|
||||
|
||||
// dlat =
|
||||
// (dlat * 180.0) / (((6378245.0 * (1 - 0.00669342162296594323)) / (magic * sqrtmagic)) * Math.PI)
|
||||
// dlng = (dlng * 180.0) / ((6378245.0 / sqrtmagic) * Math.cos(radlat) * Math.PI)
|
||||
dlat =
|
||||
(dlat * 180.0) / (((6378245.0 * (1 - 0.00669342162296594323)) / (magic * sqrtmagic)) * Math.PI)
|
||||
dlng = (dlng * 180.0) / ((6378245.0 / sqrtmagic) * Math.cos(radlat) * Math.PI)
|
||||
|
||||
// // 初始转换结果（粗略值）
|
||||
// let wgsLat = lat - dlat
|
||||
// let wgsLng = lng - dlng
|
||||
// 初始转换结果（粗略值）
|
||||
let wgsLat = lat - dlat
|
||||
let wgsLng = lng - dlng
|
||||
|
||||
// return [wgsLng, wgsLat]
|
||||
// }
|
||||
return [wgsLng, wgsLat]
|
||||
}
|
||||
|
||||
// /**
|
||||
// * WGS-84 转 GCJ-02（用于迭代优化）
|
||||
// */
|
||||
// function wgs84ToGcj02(lng, lat) {
|
||||
// if (outOfChina(lng, lat)) {
|
||||
// return [lng, lat]
|
||||
// }
|
||||
// let dlat = _transformLat(lng - 105.0, lat - 35.0)
|
||||
// let dlng = _transformLng(lng - 105.0, lat - 35.0)
|
||||
// const radlat = (lat / 180.0) * Math.PI
|
||||
// let magic = Math.sin(radlat)
|
||||
// magic = 1 - 0.00669342162296594323 * magic * magic
|
||||
// const sqrtmagic = Math.sqrt(magic)
|
||||
// dlat =
|
||||
// (dlat * 180.0) / (((6378245.0 * (1 - 0.00669342162296594323)) / (magic * sqrtmagic)) * Math.PI)
|
||||
// dlng = (dlng * 180.0) / ((6378245.0 / sqrtmagic) * Math.cos(radlat) * Math.PI)
|
||||
// return [lng + dlng, lat + dlat]
|
||||
// }
|
||||
/**
|
||||
* WGS-84 转 GCJ-02（用于迭代优化）
|
||||
*/
|
||||
function wgs84ToGcj02(lng, lat) {
|
||||
if (outOfChina(lng, lat)) {
|
||||
return [lng, lat]
|
||||
}
|
||||
let dlat = _transformLat(lng - 105.0, lat - 35.0)
|
||||
let dlng = _transformLng(lng - 105.0, lat - 35.0)
|
||||
const radlat = (lat / 180.0) * Math.PI
|
||||
let magic = Math.sin(radlat)
|
||||
magic = 1 - 0.00669342162296594323 * magic * magic
|
||||
const sqrtmagic = Math.sqrt(magic)
|
||||
dlat =
|
||||
(dlat * 180.0) / (((6378245.0 * (1 - 0.00669342162296594323)) / (magic * sqrtmagic)) * Math.PI)
|
||||
dlng = (dlng * 180.0) / ((6378245.0 / sqrtmagic) * Math.cos(radlat) * Math.PI)
|
||||
return [lng + dlng, lat + dlat]
|
||||
}
|
||||
|
||||
11
web/src/utils/loadTMap.js
Normal file
11
web/src/utils/loadTMap.js
Normal file
@@ -0,0 +1,11 @@
|
||||
// utils/loadTMap.js
|
||||
export async function loadTMap(tk) {
|
||||
if (window.T) return // 如果已加载，直接返回
|
||||
return new Promise((resolve, reject) => {
|
||||
const script = document.createElement('script')
|
||||
script.src = `https://api.tianditu.gov.cn/api?v=4.0&tk=${tk}`
|
||||
script.onload = () => resolve(window.T)
|
||||
script.onerror = (err) => reject(err)
|
||||
document.head.appendChild(script)
|
||||
})
|
||||
}
|
||||
@@ -75,13 +75,17 @@ export default {
|
||||
const values = await this.$refs.ruleForm.validateFields()
|
||||
const res = await getReq('/login',this.form )
|
||||
this.loading = false
|
||||
|
||||
console.log(res);
|
||||
|
||||
// if (res.code === 200) {
|
||||
if (res.errcode === 0) {
|
||||
this.$message.success('登录成功')
|
||||
localStorage.setItem('token', res.token)
|
||||
localStorage.setItem('user',JSON.stringify( res.permission) )
|
||||
this.$router.push('/')
|
||||
// } else {
|
||||
|
||||
}
|
||||
// else {
|
||||
// this.$message.error(res.message || '登录失败')
|
||||
// }
|
||||
} catch (error) {
|
||||
|
||||
@@ -17,7 +17,6 @@
|
||||
<div :class="[subMenu.length > 0 ? 'subcontent' : 'content']">
|
||||
<router-view />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="menu">
|
||||
<div
|
||||
@@ -54,7 +53,6 @@ export default {
|
||||
path: '/monitor'
|
||||
},
|
||||
{
|
||||
|
||||
name: '预测管理',
|
||||
path: '/predict'
|
||||
},
|
||||
@@ -109,13 +107,58 @@ export default {
|
||||
subMenu: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route: {
|
||||
handler(n) {
|
||||
console.log(n,"nnnnnnnnnnnnnn")
|
||||
this.subMenu =n.matched[1].children || []
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.initRoute()
|
||||
},
|
||||
methods: {
|
||||
// 过滤函数：根据权限数据过滤路由并附加权限信息
|
||||
filterRoutes(routes, permissions) {
|
||||
return routes.filter((route) => {
|
||||
let hasViewPermission = false
|
||||
// 查找当前路由对应的权限项
|
||||
const routePermissions = permissions.filter((perm) => perm.route === route.path)
|
||||
|
||||
// 如果有权限项，附加到路由对象
|
||||
if (routePermissions.length > 0) {
|
||||
route.permissions = routePermissions;
|
||||
hasViewPermission = true
|
||||
}
|
||||
|
||||
// 检查是否有查看权限
|
||||
// const hasViewPermission = routePermissions.some((perm) =>
|
||||
// perm.is_view === '1'
|
||||
// );
|
||||
|
||||
// 递归处理子路由
|
||||
if (route.children && route.children.length) {
|
||||
route.children = this.filterRoutes(route.children, permissions)
|
||||
}
|
||||
|
||||
// 保留有权限的路由或包含有效子路由的父路由
|
||||
return hasViewPermission || (route.children && route.children.length)
|
||||
})
|
||||
},
|
||||
initRoute() {
|
||||
console.log(this.$route,this.$router)
|
||||
console.log(localStorage.getItem('user'), "localStorage.getItem('user')")
|
||||
// 执行过滤
|
||||
const filteredRoutes = this.filterRoutes(
|
||||
this.menuList,
|
||||
JSON.parse(localStorage.getItem('user'))
|
||||
)
|
||||
console.log( this.$route.matched, 'filteredRoutes')
|
||||
this.subMenu = this.$route.matched[1].children || []
|
||||
// this.menuList= JSON.parse(localStorage.getItem('user'))
|
||||
// this.subMenu =filteredRoutes[0].children||[]
|
||||
|
||||
this.currentKey = '/' + this.$route.fullPath.split('/')[1]
|
||||
this.subCurrentKey = this.$route.fullPath.split('/')[2]
|
||||
@@ -127,6 +170,7 @@ export default {
|
||||
this.$router.push(menu.path)
|
||||
},
|
||||
subMenuClick(subMenu) {
|
||||
console.log(subMenu, subMenu.path)
|
||||
this.subCurrentKey = subMenu.path
|
||||
this.$router.push(subMenu.path)
|
||||
}
|
||||
@@ -198,6 +242,7 @@ export default {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
margin: 0 35px;
|
||||
}
|
||||
.active {
|
||||
border: 1px solid $border-color;
|
||||
|
||||
222
web/src/views/system/permission.vue
Normal file
222
web/src/views/system/permission.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<div class="permission">
|
||||
<searchBox
|
||||
:btn-option-list="btnOptionList"
|
||||
@onSearch="onSearch"
|
||||
:search-options="searchOptions"
|
||||
@operateForm="operateForm"
|
||||
></searchBox>
|
||||
|
||||
<div class="content-table">
|
||||
<TreeTable
|
||||
:columns="columns"
|
||||
:table-data="tableData"
|
||||
@handlePagesizeChange="handlePagesizeChange"
|
||||
ref="comTable"
|
||||
:table-option="tableOption"
|
||||
:page-option="pageOption"
|
||||
:table-h="tableH"
|
||||
>
|
||||
<template #is_open="record">
|
||||
<!-- 0:禁用; 1:启用 -->
|
||||
<span>{{ ['禁用', '启用'][record.is_open] }}</span>
|
||||
</template>
|
||||
<template #permission="record">
|
||||
<!-- 0:禁用; 1:启用 -->
|
||||
<span>{{record.permission.map(item=>item.name).toString() }}</span>
|
||||
</template>
|
||||
|
||||
<template #action="record">
|
||||
<OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
|
||||
</template>
|
||||
</TreeTable>
|
||||
</div>
|
||||
<a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
|
||||
<!-- action:edit add -->
|
||||
<EditCom
|
||||
:record="record"
|
||||
@operateForm="operateForm"
|
||||
type="permission"
|
||||
:action="formStatus"
|
||||
></EditCom>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { columnList, permissionOptions } from '../../../public/config/columnList'
|
||||
import { getReq, postReq } from '@/request/api.js'
|
||||
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
||||
import { createVNode } from 'vue'
|
||||
import { Modal } from 'ant-design-vue'
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
formModal: false,
|
||||
formState: {},
|
||||
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
|
||||
pageOption: {
|
||||
pageSize: 10,
|
||||
page: 1
|
||||
},
|
||||
btnOptionList: [],
|
||||
paramsDate: {}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
let info = []
|
||||
let col = columnList.find((i) => i.page == 'permission').columns
|
||||
if (col.length) {
|
||||
col.forEach((item) => {
|
||||
info.push(this.$setWidth(item))
|
||||
})
|
||||
}
|
||||
this.columns = info
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.operateList = this.$getBtns(['查看'])
|
||||
// this.btnOptionList = this.$getBtns()
|
||||
this.getList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async getList() {
|
||||
this.$refs.comTable.loading = true
|
||||
|
||||
const { page, pageSize } = this.pageOption
|
||||
|
||||
const params = {
|
||||
...this.paramsDate,
|
||||
page_size: pageSize,
|
||||
page
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await getReq('/queryPermissionList', params)
|
||||
if (res.errcode === 0) {
|
||||
this.$refs.comTable.loading = false
|
||||
|
||||
this.tableData = res.data
|
||||
|
||||
this.pageOption = {
|
||||
page: res.page,
|
||||
pageSize: res.page_size,
|
||||
count: res.count
|
||||
}
|
||||
} else {
|
||||
const err = { tip: res.errmsg }
|
||||
throw err
|
||||
}
|
||||
} catch (error) {
|
||||
//统一处理报错提示
|
||||
}
|
||||
},
|
||||
operateForm(type, record = {}) {
|
||||
console.log(record,record.id,'rrrrrrrrrr')
|
||||
this.formStatus = type
|
||||
switch (type) {
|
||||
// case 'add':
|
||||
// this.formModal = true
|
||||
// this.formState = {}
|
||||
// this.getRuleFormInfo()
|
||||
|
||||
// break
|
||||
// case 'edit':
|
||||
// case 'read':
|
||||
// this.formModal = true
|
||||
// this.formState = record
|
||||
// this.getRuleFormInfo(record)
|
||||
// break
|
||||
|
||||
case 'del':
|
||||
// this.handleDelete([record.permission_id],this.getList)
|
||||
|
||||
break
|
||||
|
||||
case 'back':
|
||||
this.formModal = false
|
||||
this.getList()
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
// 删除操作
|
||||
async handleDelete(id,callback) {
|
||||
const that = this
|
||||
Modal.confirm({
|
||||
title: '你确认删除数据吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
|
||||
async onOk() {
|
||||
try {
|
||||
const res = await getReq('/deletepermission',{permission_id:id})
|
||||
if (res.errcode === 0) {
|
||||
this.$message.success(res.errmsg)
|
||||
this.pageOption.page=1
|
||||
callback()
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
// console.log("Cancel");
|
||||
},
|
||||
class: 'test'
|
||||
})
|
||||
},
|
||||
async getRuleFormInfo(record) {
|
||||
function getInfo(data, url) {
|
||||
return new Promise((reslove, reject) => {
|
||||
getReq(data, url).then((res) => {
|
||||
reslove(res.data)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
let row = {}
|
||||
if (record && record.permission_id) {
|
||||
// row = await getInfo({ id: record.id },'/querypermissionList')
|
||||
this.record = record
|
||||
row = record
|
||||
// this.type='edit'
|
||||
}
|
||||
permissionOptions.forEach((e, index) => {
|
||||
e.list.forEach((i) => {
|
||||
|
||||
e.ruleForm[i.key] = row ? row[i.key] : ''
|
||||
e.ruleForm.id = row.id
|
||||
})
|
||||
})
|
||||
},
|
||||
handlePagesizeChange(pageOption) {
|
||||
this.pageOption.pageSize = pageOption.pageSize
|
||||
this.pageOption.page = pageOption.page
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.permission {
|
||||
height: 100%;
|
||||
|
||||
.content-table {
|
||||
height: calc(100% - 70px);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -23,7 +23,7 @@
|
||||
</template>
|
||||
<template #permission="record">
|
||||
<!-- 0:禁用; 1:启用 -->
|
||||
<span>{{record.permission.map(item=>item.name).toString() }}</span>
|
||||
<span>{{ record.permission.map((item) => item.name).toString() }}</span>
|
||||
</template>
|
||||
|
||||
<template #action="record">
|
||||
@@ -34,6 +34,7 @@
|
||||
<a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
|
||||
<!-- action:edit add -->
|
||||
<EditCom
|
||||
:show-flag="formModal"
|
||||
:record="record"
|
||||
@operateForm="operateForm"
|
||||
type="role"
|
||||
@@ -125,19 +126,33 @@ export default {
|
||||
//统一处理报错提示
|
||||
}
|
||||
},
|
||||
async getPermissionList() {
|
||||
let arr = []
|
||||
|
||||
const params = {
|
||||
page_size: 1000,
|
||||
page: 1
|
||||
}
|
||||
|
||||
const res = await getReq('/queryPermissionList', params)
|
||||
if (res.errcode === 0) {
|
||||
arr = res.data
|
||||
} else {
|
||||
arr = []
|
||||
}
|
||||
return arr
|
||||
},
|
||||
operateForm(type, record = {}) {
|
||||
console.log(record, record.id, 'rrrrrrrrrr')
|
||||
this.formStatus = type
|
||||
switch (type) {
|
||||
case 'add':
|
||||
this.formModal = true
|
||||
this.formState = {}
|
||||
this.getRuleFormInfo()
|
||||
|
||||
break
|
||||
case 'edit':
|
||||
case 'read':
|
||||
this.formModal = true
|
||||
this.formState = record
|
||||
this.getRuleFormInfo(record)
|
||||
break
|
||||
@@ -199,13 +214,37 @@ export default {
|
||||
row = record
|
||||
// this.type='edit'
|
||||
}
|
||||
const perList = await this.getPermissionList()
|
||||
const permissionList=perList.map((item)=>{
|
||||
return{
|
||||
key:+item.permission_id,
|
||||
...item
|
||||
}
|
||||
})
|
||||
console.log(permissionList, 'permissionList')
|
||||
|
||||
roleOptions.forEach((e, index) => {
|
||||
e.list.forEach((i) => {
|
||||
|
||||
if (i.key == 'permission') {
|
||||
i.tableData=permissionList
|
||||
// .forEach((item)=>{
|
||||
// .push({...item,key:item.permission_id})
|
||||
// })
|
||||
if (record && record.role_id) {
|
||||
i.selectTableData = row.permission
|
||||
? row.permissionList.map((item) => item.permission_id)
|
||||
: []
|
||||
} else {
|
||||
i.selectTableData = []
|
||||
}
|
||||
} else {
|
||||
e.ruleForm[i.key] = row ? row[i.key] : ''
|
||||
e.ruleForm.id = row.id
|
||||
}
|
||||
})
|
||||
})
|
||||
console.log(permissionList,"permissionList")
|
||||
this.formModal = true
|
||||
|
||||
},
|
||||
handlePagesizeChange(pageOption) {
|
||||
this.pageOption.pageSize = pageOption.pageSize
|
||||
|
||||
252
web/src/views/system/service.vue
Normal file
252
web/src/views/system/service.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<div class="service">
|
||||
<searchBox
|
||||
:btn-option-list="btnOptionList"
|
||||
@onSearch="onSearch"
|
||||
:search-options="searchOptions"
|
||||
@operateForm="operateForm"
|
||||
></searchBox>
|
||||
|
||||
<div class="content-table">
|
||||
<ComTable
|
||||
:columns="columns"
|
||||
:table-data="tableData"
|
||||
@handlePagesizeChange="handlePagesizeChange"
|
||||
ref="comTable"
|
||||
:table-option="tableOption"
|
||||
:page-option="pageOption"
|
||||
:table-h="tableH"
|
||||
>
|
||||
<template #is_open="record">
|
||||
<span>{{ ['禁用', '启用'][record.is_open] }}</span>
|
||||
</template>
|
||||
|
||||
|
||||
<template #action="record">
|
||||
<OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
|
||||
</template>
|
||||
</ComTable>
|
||||
</div>
|
||||
<a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
|
||||
<!-- action:edit add -->
|
||||
<EditCom
|
||||
:record="record"
|
||||
@operateForm="operateForm"
|
||||
type="serviceApi"
|
||||
:action="formStatus"
|
||||
></EditCom>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { columnList, serviceApiOptions } from '../../../public/config/columnList'
|
||||
import { getReq, postReq } from '@/request/api.js'
|
||||
import ComTable from '@/components/ComTable'
|
||||
import OperateCom from '@/components/OperateCom'
|
||||
import EditCom from '@/components/EditCom.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
||||
import { createVNode } from 'vue'
|
||||
import { Modal } from 'ant-design-vue'
|
||||
import searchBox from '@/components/SearchBox.vue'
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
searchBox,
|
||||
EditCom,
|
||||
ComTable,
|
||||
OperateCom
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
formModal: false,
|
||||
formState: {},
|
||||
formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
|
||||
pageOption: {
|
||||
pageSize: 10,
|
||||
page: 1
|
||||
},
|
||||
btnOptionList: [],
|
||||
paramsDate: {},
|
||||
workModeList:[
|
||||
{
|
||||
label:'最优经济化',
|
||||
value:1
|
||||
},
|
||||
{
|
||||
label:'支撑电网稳定',
|
||||
value:2
|
||||
},
|
||||
{
|
||||
label:'自定义',
|
||||
value:3
|
||||
},
|
||||
],
|
||||
policyList:[
|
||||
{
|
||||
label:'削峰套利',
|
||||
value:1
|
||||
},
|
||||
{
|
||||
label:'需求响应',
|
||||
value:2
|
||||
},
|
||||
{
|
||||
label:'自发自用',
|
||||
value:3
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
let info = []
|
||||
let col = columnList.find((i) => i.page == 'serviceApi').columns
|
||||
if (col.length) {
|
||||
col.forEach((item) => {
|
||||
info.push(this.$setWidth(item))
|
||||
})
|
||||
}
|
||||
this.columns = info
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.operateList = this.$getBtns(['查看', '修改', '删除'])
|
||||
this.btnOptionList = this.$getBtns(['新增'])
|
||||
this.getList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
async getList() {
|
||||
this.$refs.comTable.loading = true
|
||||
|
||||
const { page, pageSize } = this.pageOption
|
||||
|
||||
const params = {
|
||||
...this.paramsDate,
|
||||
page_size: pageSize,
|
||||
page
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await getReq('/queryServiceApiList', params)
|
||||
if (res.errcode === 0) {
|
||||
this.$refs.comTable.loading = false
|
||||
|
||||
this.tableData = res.data
|
||||
|
||||
this.pageOption = {
|
||||
page: res.page,
|
||||
pageSize: res.page_size,
|
||||
count: res.count
|
||||
}
|
||||
} else {
|
||||
const err = { tip: res.errmsg }
|
||||
throw err
|
||||
}
|
||||
} catch (error) {
|
||||
//统一处理报错提示
|
||||
}
|
||||
},
|
||||
operateForm(type, record = {}) {
|
||||
console.log(record,record.id,'rrrrrrrrrr')
|
||||
this.formStatus = type
|
||||
switch (type) {
|
||||
case 'add':
|
||||
this.formModal = true
|
||||
this.formState = {}
|
||||
this.getRuleFormInfo()
|
||||
|
||||
break
|
||||
case 'edit':
|
||||
case 'read':
|
||||
this.formModal = true
|
||||
this.formState = record
|
||||
this.getRuleFormInfo(record)
|
||||
break
|
||||
|
||||
case 'del':
|
||||
this.handleDelete([record.api_id],this.getList)
|
||||
|
||||
break
|
||||
|
||||
case 'back':
|
||||
this.formModal = false
|
||||
this.getList()
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
// 删除操作
|
||||
async handleDelete(id,callback) {
|
||||
const that = this
|
||||
Modal.confirm({
|
||||
title: '你确认删除数据吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
|
||||
async onOk() {
|
||||
try {
|
||||
const res = await getReq('/deleteServiceApi',{api_id:id})
|
||||
if (res.errcode === 0) {
|
||||
this.$message.success(res.errmsg)
|
||||
this.pageOption.page=1
|
||||
callback()
|
||||
} else {
|
||||
throw res
|
||||
}
|
||||
} catch (error) {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
onCancel() {
|
||||
// console.log("Cancel");
|
||||
},
|
||||
class: 'test'
|
||||
})
|
||||
},
|
||||
async getRuleFormInfo(record) {
|
||||
function getInfo(data, url) {
|
||||
return new Promise((reslove, reject) => {
|
||||
getReq(data, url).then((res) => {
|
||||
reslove(res.data)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
let row = {}
|
||||
if (record && record.api_id) {
|
||||
// row = await getInfo({ api_id: record.api_id},'/queryserviceInfo')
|
||||
this.record = record
|
||||
row = record
|
||||
// this.type='edit'
|
||||
}
|
||||
serviceApiOptions.forEach((e, index) => {
|
||||
e.list.forEach((i) => {
|
||||
|
||||
e.ruleForm[i.key] = row ? row[i.key] : ''
|
||||
e.ruleForm.id = row.id
|
||||
})
|
||||
})
|
||||
},
|
||||
handlePagesizeChange(pageOption) {
|
||||
this.pageOption.pageSize = pageOption.pageSize
|
||||
this.pageOption.page = pageOption.page
|
||||
this.getList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.service {
|
||||
height: 100%;
|
||||
|
||||
.content-table {
|
||||
height: calc(100% - 70px);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -17,13 +17,14 @@
|
||||
:page-option="pageOption"
|
||||
:table-h="tableH"
|
||||
>
|
||||
<template #is_open="record">
|
||||
<!-- 0:禁用; 1:启用 -->
|
||||
<span>{{ ['禁用', '启用'][record.is_open] }}</span>
|
||||
<template #status="record">
|
||||
<span>{{ ['未启用', '启用'][record.status] }}</span>
|
||||
</template>
|
||||
<template #permission="record">
|
||||
<!-- 0:禁用; 1:启用 -->
|
||||
<span>{{record.permission.map(item=>item.name).toString() }}</span>
|
||||
<template #work_mode_id="record">
|
||||
<span>{{workModeList.find(item=>record.value==item.value)?.label|| '' }}</span>
|
||||
</template>
|
||||
<template #policy_id="record">
|
||||
<span>{{policyList.find(item=>record.value==item.value)?.label|| ''}}</span>
|
||||
</template>
|
||||
|
||||
<template #action="record">
|
||||
@@ -72,7 +73,35 @@ export default {
|
||||
page: 1
|
||||
},
|
||||
btnOptionList: [],
|
||||
paramsDate: {}
|
||||
paramsDate: {},
|
||||
workModeList:[
|
||||
{
|
||||
label:'最优经济化',
|
||||
value:1
|
||||
},
|
||||
{
|
||||
label:'支撑电网稳定',
|
||||
value:2
|
||||
},
|
||||
{
|
||||
label:'自定义',
|
||||
value:3
|
||||
},
|
||||
],
|
||||
policyList:[
|
||||
{
|
||||
label:'削峰套利',
|
||||
value:1
|
||||
},
|
||||
{
|
||||
label:'需求响应',
|
||||
value:2
|
||||
},
|
||||
{
|
||||
label:'自发自用',
|
||||
value:3
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@@ -194,7 +223,7 @@ export default {
|
||||
|
||||
let row = {}
|
||||
if (record && record.station_id) {
|
||||
row = await getInfo({ station_id: record.station_id},'/queryStationInfo')
|
||||
// row = await getInfo({ station_id: record.station_id},'/queryStationInfo')
|
||||
this.record = record
|
||||
row = record
|
||||
// this.type='edit'
|
||||
|
||||
Reference in New Issue
Block a user