mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
合并冲突
This commit is contained in:
zhoumengru
@@ -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>
|
||||
@@ -75,7 +72,9 @@ import {
|
||||
stationFormRules,
|
||||
deviceOptions,
|
||||
deviceFormRules,
|
||||
alarmlogOptions
|
||||
alarmlogOptions,
|
||||
serviceApiOptions,
|
||||
serviceApiFormRules
|
||||
} from '../../public/config/columnList'
|
||||
import DetailInfo from './DetailInfo.vue'
|
||||
import { postReq, getReq } from '@/request/api'
|
||||
@@ -117,10 +116,12 @@ export default {
|
||||
formRules: {},
|
||||
apiMethods: {
|
||||
// menu: 'menuConfirm',
|
||||
// permission: 'permissionConfirm',
|
||||
user: 'userConfirm',
|
||||
role: 'roleConfirm',
|
||||
device: 'deviceConfirm'
|
||||
device: 'deviceConfirm',
|
||||
station: 'stationConfirm',
|
||||
serviceApi: 'serviceApiConfirm',
|
||||
// permission: 'permissionConfirm',
|
||||
},
|
||||
form: {},
|
||||
ObjInfo: {},
|
||||
@@ -173,6 +174,9 @@ export default {
|
||||
case 'alarmLog':
|
||||
this.detailInfos = alarmlogOptions
|
||||
this.formRules = {}
|
||||
case 'serviceApi':
|
||||
this.detailInfos = serviceApiOptions
|
||||
this.formRules = serviceApiFormRules
|
||||
|
||||
break
|
||||
|
||||
@@ -302,21 +306,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')
|
||||
}
|
||||
@@ -377,6 +384,31 @@ export default {
|
||||
this.$message.error('添加失败')
|
||||
}
|
||||
},
|
||||
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')
|
||||
},
|
||||
@@ -417,4 +449,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;
|
||||
@@ -112,11 +225,11 @@ export default {
|
||||
margin: auto;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
.ant-modal-close{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 3px;
|
||||
}
|
||||
.ant-modal-close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 3px;
|
||||
}
|
||||
.ant-modal-body {
|
||||
height: calc(100% - 45px);
|
||||
color: #fff;
|
||||
@@ -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) => {
|
||||
item.value = this.propsTotal[item.key]
|
||||
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>
|
||||
Reference in New Issue
Block a user