mirror of
https://gitee.com/js-yhsec/energy_storage.git
synced 2026-05-27 18:59:26 +08:00
feat(system): 优化系统日志页面布局和功能
- 修改系统日志页面的列配置，增加固定列和对齐方式 - 优化表格组件的样式和功能，支持右列固定和自定义样式 - 调整分页配置，统一表格相关属性
This commit is contained in:
zhoumengru
@@ -1,3 +1,12 @@
|
||||
module.exports = {
|
||||
presets: ["@vue/cli-plugin-babel/preset"],
|
||||
};
|
||||
plugins: [
|
||||
[
|
||||
'import',
|
||||
{
|
||||
libraryName: 'ant-design-vue',
|
||||
libraryDirectory: 'es',
|
||||
style: true // 或 true（使用 less）
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
@@ -288,7 +288,9 @@ export const columnList = [
|
||||
title: '操作',
|
||||
dataIndex: 'operate',
|
||||
key: 'operate',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
scopedSlots: { customRender: 'action' },
|
||||
fixed: 'right',
|
||||
align: 'center'
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -350,45 +352,30 @@ export const columnList = [
|
||||
]
|
||||
},
|
||||
{
|
||||
page: 'log',
|
||||
page: 'syslog',
|
||||
columns: [
|
||||
{
|
||||
title: '用户',
|
||||
dataIndex: 'userName',
|
||||
width: 180
|
||||
title: '日志ID',
|
||||
dataIndex: 'log_id'
|
||||
},
|
||||
|
||||
{
|
||||
title: '日志类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
width: 120,
|
||||
title: '操作用户',
|
||||
dataIndex: 'user_id',
|
||||
key: 'user_id',
|
||||
width: 120
|
||||
},
|
||||
|
||||
scopedSlots: { customRender: 'type' }
|
||||
},
|
||||
{
|
||||
title: '操作类型',
|
||||
dataIndex: 'opType',
|
||||
key: 'opType',
|
||||
width: 120,
|
||||
|
||||
scopedSlots: { customRender: 'opType' }
|
||||
},
|
||||
{
|
||||
title: 'ip',
|
||||
dataIndex: 'ip',
|
||||
key: 'ip'
|
||||
},
|
||||
{
|
||||
title: '内容',
|
||||
dataIndex: 'msg',
|
||||
key: 'msg',
|
||||
title: '日志内容',
|
||||
dataIndex: 'content',
|
||||
key: 'content',
|
||||
ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '生成时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
title: '记录时间',
|
||||
dataIndex: 'create_time',
|
||||
key: 'create_time',
|
||||
align: 'center',
|
||||
ellipsis: true,
|
||||
width: 180
|
||||
@@ -406,7 +393,6 @@ export const columnList = [
|
||||
title: '操作',
|
||||
dataIndex: 'operate',
|
||||
key: 'operate',
|
||||
width: 80,
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
@@ -871,8 +857,58 @@ export const alarmlogOptions = [
|
||||
label: '状态',
|
||||
type: 'select',
|
||||
list: [
|
||||
{ value: 0, label: '异常' },
|
||||
{ value: 1, label: '正常' }
|
||||
{ value: '0', label: '异常' },
|
||||
{ value: '1', label: '正常' }
|
||||
],
|
||||
value: [],
|
||||
key: 'status'
|
||||
}
|
||||
],
|
||||
ruleForm: {}
|
||||
}
|
||||
]
|
||||
export const syslogOptions = [
|
||||
{
|
||||
title: '基础信息',
|
||||
icon: 'icon-xinxi',
|
||||
list: [
|
||||
{
|
||||
label: '日志ID',
|
||||
value: '',
|
||||
key: 'log_id',
|
||||
type: 'input'
|
||||
},
|
||||
|
||||
{
|
||||
label: '操作用户ID',
|
||||
value: '',
|
||||
key: 'user_id',
|
||||
type: 'input',
|
||||
disabled: true
|
||||
},
|
||||
|
||||
{
|
||||
label: '日志内容',
|
||||
value: '',
|
||||
key: 'content',
|
||||
type: 'textarea',
|
||||
disabled: true,
|
||||
className: 'item-l',
|
||||
rows: 8
|
||||
},
|
||||
{
|
||||
label: '记录时间',
|
||||
value: '',
|
||||
key: 'create_time',
|
||||
type: 'input'
|
||||
},
|
||||
|
||||
{
|
||||
label: '状态',
|
||||
type: 'select',
|
||||
list: [
|
||||
{ value: '0', label: '异常' },
|
||||
{ value: '1', label: '正常' }
|
||||
],
|
||||
value: [],
|
||||
key: 'status'
|
||||
|
||||
@@ -161,8 +161,11 @@ const scroll = ref({})
|
||||
onMounted(async () => {
|
||||
data.newColumns = [...props.columns]
|
||||
data.realTableData = [...props.tableData]
|
||||
|
||||
await nextTick()
|
||||
// console.log(props.tableH, 'props.tableH');
|
||||
console.log(comtable.value.offsetHeight,'comtable.value.offsetHeight');
|
||||
|
||||
|
||||
scroll.value = { y: comtable.value.offsetHeight - 56 }
|
||||
})
|
||||
@@ -220,10 +223,11 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.comtable {
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
@@ -261,6 +265,10 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
|
||||
background: transparent;
|
||||
color: #fff !important;
|
||||
border-bottom: none !important; /* 可选：去除底部边框 */
|
||||
&.ant-table-cell-fix-right{
|
||||
background: #10687d !important;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -339,19 +347,22 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
|
||||
top: -210px !important;
|
||||
}
|
||||
.ant-pagination-item {
|
||||
border: 1px solid #fff;
|
||||
&:not(.ant-pagination-item-active):hover {
|
||||
background: #1c797a !important;
|
||||
}
|
||||
a {
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
background: #1c797a !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
:deep(.ant-pagination-item-ellipsis){
|
||||
color: rgb(255 255 255 / 25%) !important;
|
||||
}
|
||||
.ant-pagination-item-active {
|
||||
border: 1px solid transparent;
|
||||
color: #fff;
|
||||
border: none !important;
|
||||
background: #1c797a !important;
|
||||
}
|
||||
}
|
||||
@@ -369,6 +380,12 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
:deep(.ant-table-body .ant-table-cell-fix-right.ant-table-cell-fix-right-first){
|
||||
background: #082e4a !important;
|
||||
|
||||
}
|
||||
:deep(.ant-table-body) {
|
||||
color:#fff;
|
||||
@@ -416,4 +433,9 @@ defineExpose({ ...toRefs(data), loading, mountedScroll, scroll: data.scroll })
|
||||
:deep(.ant-table-wrapper .ant-table-thead th.ant-table-column-has-sorters:hover) {
|
||||
background: var(--table-select) !important;
|
||||
}
|
||||
:deep(.ant-table-cell-fix-right){
|
||||
&::after{
|
||||
border-inline-end:none !important
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -371,7 +371,7 @@ import {
|
||||
onMounted,
|
||||
defineExpose
|
||||
} from 'vue'
|
||||
import { TreeSelect } from 'ant-design-vue'
|
||||
|
||||
import iconfonts from '../assets/iconfont/iconfont.json'
|
||||
import validateRulesObj from '../utils/decorator'
|
||||
|
||||
@@ -641,7 +641,7 @@ defineExpose({
|
||||
}
|
||||
|
||||
.form-item {
|
||||
width: 320px !important;
|
||||
// width: 320px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -174,6 +174,7 @@ export default {
|
||||
case 'alarmLog':
|
||||
this.detailInfos = alarmlogOptions
|
||||
this.formRules = {}
|
||||
break
|
||||
case 'serviceApi':
|
||||
this.detailInfos = serviceApiOptions
|
||||
this.formRules = serviceApiFormRules
|
||||
|
||||
@@ -35,9 +35,15 @@
|
||||
<span class="value">{{ info.v }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.view == 1" class="item-button">
|
||||
<div class="item-button">
|
||||
<div v-if="item.view == 1">
|
||||
<span class="text">实时数据：</span>
|
||||
<a-button type="primary" size="small" @click="openModal(item)">查看</a-button>
|
||||
<a-button type="primary" size="small" @click="openModal(item, 1)">查看</a-button>
|
||||
</div>
|
||||
<div v-if="item.type == 105">
|
||||
<span class="text">单体信息：</span>
|
||||
<a-button type="primary" size="small" @click="openModal(item, 2)">查看</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-modal
|
||||
@@ -47,6 +53,7 @@
|
||||
class="modal-device"
|
||||
:get-container="() => $refs.device"
|
||||
>
|
||||
<div v-if="modalComponent == 1">
|
||||
<div>
|
||||
<div class="title">
|
||||
<div>电流电压</div>
|
||||
@@ -73,6 +80,20 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-table" style="height: 600px" v-else>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="tableData"
|
||||
size="small"
|
||||
:scroll="{ y: 500 }"
|
||||
:pagination="false"
|
||||
row-class-name="no-hover-row"
|
||||
row-key="id"
|
||||
>
|
||||
</a-table>
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
@@ -98,19 +119,7 @@ export default {
|
||||
return {
|
||||
modalOpen: false,
|
||||
deviceList: [],
|
||||
chunengInfo: [
|
||||
{ label: '运行模式', key: 'operationMode', value: '并网运行' },
|
||||
{ label: '电池储能容量', key: 'batteryCapacity', value: '100kWh' },
|
||||
{ label: '实时电压', key: 'voltage', value: '232.5V' },
|
||||
{ label: '功率因数', key: 'powerFactor', value: '0.95' },
|
||||
{ label: '实时电流', key: 'current', value: '0.01A' },
|
||||
{ label: '额定电压', key: 'ratedVoltage', value: '232.5V' },
|
||||
{ label: '实时功率', key: 'power', value: '0.01kW' },
|
||||
{ label: '额定电流', key: 'ratedCurrent', value: '0.01A' },
|
||||
{ label: '实时数据', key: 'realTimeData', value: '0.01kWh' },
|
||||
{ label: '额定功率', key: 'ratedPower', value: '0.01kW' },
|
||||
{ label: '冷却方式', key: 'coolingMethod', value: '风冷' }
|
||||
],
|
||||
|
||||
chartOptions: [
|
||||
{
|
||||
type: 'line',
|
||||
@@ -173,6 +182,52 @@ export default {
|
||||
chartData: {
|
||||
xdata: [],
|
||||
ydata: {}
|
||||
},
|
||||
modalComponent: 1,
|
||||
columns: [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
ellipsis: true,
|
||||
fixed: 'left'
|
||||
},
|
||||
{
|
||||
title: '单体SOC（%）',
|
||||
dataIndex: 'SOC',
|
||||
key: 'SOC'
|
||||
},
|
||||
{
|
||||
title: '单体SOH（%）',
|
||||
dataIndex: 'SOH',
|
||||
key: 'SOH'
|
||||
},
|
||||
{
|
||||
title: '单体电压（V）',
|
||||
dataIndex: 'V',
|
||||
key: 'V'
|
||||
},
|
||||
{
|
||||
title: '单体温度（℃）',
|
||||
dataIndex: 'T',
|
||||
key: 'T'
|
||||
},
|
||||
{
|
||||
title: '单体内阻（Ω）',
|
||||
dataIndex: 'R_i',
|
||||
key: 'R_i'
|
||||
}
|
||||
],
|
||||
tableData: [],
|
||||
pageOption: {
|
||||
// pageSize: 1000,
|
||||
// page: 1
|
||||
},
|
||||
tableOption: {
|
||||
scroll: {
|
||||
y: 500
|
||||
},
|
||||
page: false
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -193,6 +248,11 @@ export default {
|
||||
this.getDeviceList()
|
||||
},
|
||||
methods: {
|
||||
handlePagesizeChange(pageOption) {
|
||||
this.pageOption.pageSize = pageOption.pageSize
|
||||
this.pageOption.page = pageOption.page
|
||||
this.getList()
|
||||
},
|
||||
getIcongont(ele) {
|
||||
return deviceTypeList.find((item) => item.value == ele.type).iconfont || ''
|
||||
},
|
||||
@@ -228,7 +288,22 @@ export default {
|
||||
this.chartData.xdata = this.generateTimePoints()
|
||||
this.$refs.chartRef1.initCharts()
|
||||
this.$refs.chartRef2.initCharts()
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
//查询BCU单体信息
|
||||
async getDeviceBCUDetail(item) {
|
||||
try {
|
||||
const res = await getReq('/queryDeviceBCUDetail', {
|
||||
station_id: this.stationId,
|
||||
device_id: item.device_id
|
||||
})
|
||||
|
||||
this.tableData = res.data.map((item, index) => {
|
||||
item.id = index + 1
|
||||
return item
|
||||
})
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
@@ -249,8 +324,14 @@ export default {
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
async openModal(item) {
|
||||
async openModal(item, val) {
|
||||
console.log(item, '=============')
|
||||
this.modalComponent = val
|
||||
if (val == 1) {
|
||||
await this.getDevicCharts(item)
|
||||
} else {
|
||||
await this.getDeviceBCUDetail(item)
|
||||
}
|
||||
|
||||
this.modalOpen = true
|
||||
},
|
||||
@@ -268,13 +349,16 @@ export default {
|
||||
margin-left: 20px;
|
||||
display: grid;
|
||||
grid-gap: 20px;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
overflow-y: auto;
|
||||
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
|
||||
.device-item {
|
||||
border-radius: 15px;
|
||||
|
||||
background: $bg2-color;
|
||||
padding: 15px;
|
||||
min-width: 340px;
|
||||
max-width: 430px;
|
||||
max-height: 230px;
|
||||
flex: 1;
|
||||
.item-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -290,7 +374,7 @@ export default {
|
||||
background: linear-gradient(90deg, #3dfefa 0%, #2a82e4 2.96%, #27a188 100%),
|
||||
linear-gradient(90deg, #3dfefa 0%, #01dfef 2.96%, #08a5ff 100%);
|
||||
.iconfont {
|
||||
font-size: 50px;
|
||||
font-size: 45px;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
@@ -332,8 +416,8 @@ export default {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
color: #fff;
|
||||
display: grid;
|
||||
// line-height: 45px;
|
||||
margin-top: 15px;
|
||||
margin-bottom: 3px;
|
||||
padding: 0 10px;
|
||||
height: 120px;
|
||||
overflow-y: auto;
|
||||
@@ -345,7 +429,12 @@ export default {
|
||||
}
|
||||
}
|
||||
.item-button {
|
||||
width: 100%;
|
||||
padding-left: 10px;
|
||||
display: flex;
|
||||
div {
|
||||
width: calc(50% - 10px);
|
||||
}
|
||||
}
|
||||
.text {
|
||||
color: $text-color;
|
||||
@@ -354,26 +443,35 @@ export default {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.content-table {
|
||||
height: 700px;
|
||||
margin-top: 40px;
|
||||
|
||||
:deep(.ant-table-header tr th) {
|
||||
background: $table-border !important;
|
||||
color: #fff;
|
||||
}
|
||||
:deep(.ant-table-body tr td, .ant-table-cell) {
|
||||
background: $table-bg !important;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.environment {
|
||||
width: 200px;
|
||||
}
|
||||
:deep(.modal-device) {
|
||||
color: #fff;
|
||||
.title {
|
||||
display: flex;
|
||||
font-weight: 700;
|
||||
flex-direction: column;
|
||||
|
||||
img {
|
||||
width: 232px;
|
||||
height: 6px;
|
||||
margin-top: 10px;
|
||||
:deep(.ant-modal-body) {
|
||||
:deep(.ant-table-wrapper .ant-table-row-expand-icon) {
|
||||
color: $green !important;
|
||||
}
|
||||
}
|
||||
.echarts {
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
//表格行悬浮样式
|
||||
.no-hover-row:hover > td {
|
||||
// background-color: transparent !important;
|
||||
background-color: #f0f8ff !important;
|
||||
}
|
||||
}
|
||||
// .a-modal :deep(.ant-table-thead > tr > th) {
|
||||
// background-color: #f0f8ff !important;
|
||||
// }
|
||||
</style>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="videos">
|
||||
<div class="video-item" v-for="item in 8" :key="item">
|
||||
<div class="video-item" v-for="item in videoList" :key="item">
|
||||
<div class="title">
|
||||
<span>xxxxz监控点</span>
|
||||
<span>{{ item.name }}</span>
|
||||
<img
|
||||
src="@/assets/images/fillScreen.png"
|
||||
alt=""
|
||||
@@ -34,10 +34,9 @@
|
||||
<ComTable
|
||||
:columns="columns[activeTab]"
|
||||
:table-data="tableDatas[activeTab]"
|
||||
@handlePagesizeChange="handlePagesizeChange"
|
||||
ref="comTable"
|
||||
:table-option="tableOption"
|
||||
:page-option="pageOption"
|
||||
:table-option="{page:false}"
|
||||
|
||||
>
|
||||
</ComTable>
|
||||
</div>
|
||||
@@ -53,10 +52,6 @@ export default {
|
||||
stationId: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
systemType: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -111,7 +106,7 @@ export default {
|
||||
align: 'center'
|
||||
}
|
||||
],
|
||||
'temp_hum': [
|
||||
temp_hum: [
|
||||
{
|
||||
title: '点位',
|
||||
dataIndex: 'pos',
|
||||
@@ -158,20 +153,39 @@ export default {
|
||||
tableOption: {
|
||||
select: false,
|
||||
page: false
|
||||
}
|
||||
},
|
||||
videoList: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.systemType)
|
||||
|
||||
this.getEnvironment()
|
||||
this.getDeviceList()
|
||||
},
|
||||
methods: {
|
||||
async getEnvironment() {
|
||||
try {
|
||||
const res = await getReq('/queryEnvironment', { station_id: this.stationId })
|
||||
console.log(res, '==============')
|
||||
this.tableDatas = res.data
|
||||
// this.deviceList=res.data
|
||||
|
||||
} catch (error) {
|
||||
this.tableDatas={}
|
||||
console.log(error)
|
||||
}
|
||||
},
|
||||
//请求运行监控系统设备信息
|
||||
async getDeviceList() {
|
||||
try {
|
||||
const res = await getReq('/queryDevicByCategory', {
|
||||
station_id: this.stationId,
|
||||
category: 4
|
||||
})
|
||||
|
||||
this.videoList = res.data.concat(res.data)
|
||||
} catch (error) {
|
||||
this.videoList = []
|
||||
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
@@ -182,18 +196,18 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.videos {
|
||||
width: calc(100% - 470px);
|
||||
height: 100%;
|
||||
margin-left: 20px;
|
||||
display: grid;
|
||||
grid-gap: 20px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
overflow-y: auto;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
.video-item {
|
||||
// width: 410px;
|
||||
// height: 340px;
|
||||
border-radius: 15px;
|
||||
|
||||
background: $bg2-color;
|
||||
padding: 10px;
|
||||
padding: 15px;
|
||||
max-height: 290px;
|
||||
max-width: 400px;
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -250,6 +264,7 @@ export default {
|
||||
cursor: pointer;
|
||||
border: 1px solid $tab-border;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.actived {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<template>
|
||||
<div class="policyForm">
|
||||
<div class="title">
|
||||
<div>基础信息{{ formStatus }}</div>
|
||||
<div>基础信息</div>
|
||||
<img src="@/assets/images/titleLine.png" alt="" />
|
||||
</div>
|
||||
<a-form
|
||||
@@ -645,32 +645,5 @@ export default {
|
||||
:deep(.ant-table-wrapper .ant-table-cell){
|
||||
background:none!important;
|
||||
}
|
||||
// /* 禁用行的 hover 过渡动画 */
|
||||
// .ant-table-tbody > tr.ant-table-row {
|
||||
// transition: none !important;
|
||||
// }
|
||||
|
||||
// /* 确保 hover 背景色完全透明 */
|
||||
// .ant-table-tbody > tr.ant-table-row:hover > td {
|
||||
// background-color: transparent !important;
|
||||
// }
|
||||
// .ant-table-wrapper .ant-table-tbody > tr.ant-table-row:hover > td {
|
||||
// background-color: transparent !important;
|
||||
// }
|
||||
// :deep(.ant-table-tbody > tr.ant-table-row:hover > td) {
|
||||
// background-color: transparent !important;
|
||||
// }
|
||||
// :deep(.ant-table-tbody) {
|
||||
// color: var(--theme-text-default) !important;
|
||||
|
||||
// > tr {
|
||||
// &:hover {
|
||||
// > .ant-table-cell {
|
||||
|
||||
// background: none !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
|
||||
@@ -3,21 +3,62 @@ import App from './App.vue'
|
||||
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import Antd from 'ant-design-vue'
|
||||
import 'ant-design-vue/dist/reset.css'
|
||||
|
||||
import '@/style/index.scss'
|
||||
// import '@/assets/iconfont/iconfont.css'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
import * as echarts from 'echarts/core'
|
||||
import { BarChart, LineChart } from 'echarts/charts'
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
DatasetComponent,
|
||||
LegendComponent,
|
||||
TransformComponent,
|
||||
DataZoomComponent
|
||||
} from 'echarts/components'
|
||||
// 标签自动布局、全局过渡动画等特性
|
||||
import { LabelLayout, UniversalTransition } from 'echarts/features'
|
||||
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { setWidth } from '@/utils/column'
|
||||
import { getBtns } from '@/utils/btnList'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
|
||||
import {
|
||||
message,
|
||||
Modal,
|
||||
Button,
|
||||
Table,
|
||||
Tag,
|
||||
Select,
|
||||
DatePicker,
|
||||
Input,
|
||||
Pagination,
|
||||
ConfigProvider,
|
||||
notification,
|
||||
TreeSelect
|
||||
} from 'ant-design-vue'
|
||||
import VueTianditu from 'vue-tianditu'
|
||||
import SearchBox from '@/components/SearchBox.vue'
|
||||
import ComTable from '@/components/ComTable.vue'
|
||||
import OperateCom from '@/components/OperateCom'
|
||||
import TreeTable from '@/components/TreeTable.vue'
|
||||
|
||||
// 注册必须的组件
|
||||
echarts.use([
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
GridComponent,
|
||||
DatasetComponent,
|
||||
TransformComponent,
|
||||
DataZoomComponent,
|
||||
BarChart,
|
||||
LineChart,
|
||||
LabelLayout,
|
||||
UniversalTransition,
|
||||
CanvasRenderer,
|
||||
LegendComponent
|
||||
])
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.component('SearchBox', SearchBox)
|
||||
@@ -31,4 +72,17 @@ app.config.globalProperties.$getBtns = getBtns
|
||||
app.config.globalProperties.$message = message
|
||||
app.config.globalProperties.$Modal = Modal
|
||||
|
||||
app.use(store).use(router).use(Antd).use(VueTianditu).mount('#app')
|
||||
app.use(store).use(router)
|
||||
app
|
||||
.use(Button)
|
||||
.use(Modal)
|
||||
.use(Table)
|
||||
.use(Tag)
|
||||
.use(Select)
|
||||
.use(DatePicker)
|
||||
.use(Input)
|
||||
.use(Pagination)
|
||||
.use(ConfigProvider)
|
||||
.use(notification)
|
||||
.use(TreeSelect)
|
||||
app.use(VueTianditu).mount('#app')
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import axios from 'axios'
|
||||
import openNotification from '../utils/notification'
|
||||
import { message } from 'ant-design-vue'
|
||||
// import { message } from 'ant-design-vue'
|
||||
|
||||
const service = axios.create({
|
||||
baseURL: '/api',
|
||||
|
||||
@@ -89,13 +89,13 @@ export const routes = [
|
||||
component: () => import(/* webpackChunkName: "system" */ '@/views/system/device.vue')
|
||||
},
|
||||
{
|
||||
name: 'alarmLog',
|
||||
path: 'log',
|
||||
name: 'alarmlog',
|
||||
path: 'alarmlog',
|
||||
title: '告警日志',
|
||||
component: () => import(/* webpackChunkName: "system" */ '@/views/system/alarmLog.vue')
|
||||
},
|
||||
{
|
||||
name: 'sylog',
|
||||
name: 'syslog',
|
||||
path: 'syslog',
|
||||
title: '系统日志',
|
||||
component: () => import(/* webpackChunkName: "system" */ '@/views/system/log.vue')
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { notification } from 'ant-design-vue'
|
||||
// import { notification } from 'ant-design-vue'
|
||||
import { h } from 'vue'
|
||||
import {
|
||||
CheckCircleFilled,
|
||||
@@ -41,7 +41,7 @@ const notiInfo = {
|
||||
}
|
||||
}
|
||||
const openNotification = ({ name, type, status, desc = '' }) => {
|
||||
notification[status]({
|
||||
this.$notification[status]({
|
||||
placement: 'bottomRight',
|
||||
message: notiInfo[status].iconMessage,
|
||||
description: desc || option.names[name] + option.types[type] + option.status[status],
|
||||
|
||||
@@ -95,7 +95,7 @@ export default {
|
||||
},
|
||||
{
|
||||
name: '告警日志',
|
||||
path: '/log'
|
||||
path: '/alarmlog'
|
||||
},
|
||||
{
|
||||
name: '系统日志',
|
||||
@@ -214,7 +214,7 @@ export default {
|
||||
}
|
||||
.page {
|
||||
width: calc(100% - 20px);
|
||||
height: calc(100% - 70px - 65px - 40px);
|
||||
height: calc(100% - 70px - 60px - 40px);
|
||||
margin: 20px 10px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
@@ -227,7 +227,8 @@ export default {
|
||||
.menu {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 15px;
|
||||
bottom: 10px;
|
||||
height: 50px;
|
||||
// height: 150px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
@@ -15,11 +15,13 @@
|
||||
<div class="search-item">
|
||||
<span>运行模式</span>
|
||||
<a-select v-model:value="workMode" style="width: 220px">
|
||||
<a-select-option :value="item.value" v-for="item in workModes">{{ item.label }}</a-select-option>
|
||||
<a-select-option :value="item.value" v-for="item in workModes">{{
|
||||
item.label
|
||||
}}</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<a-button type="primary">下发</a-button>
|
||||
<a-button type="primary" @click="handleDispatch">下发</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -33,13 +35,14 @@
|
||||
:class="systemType == system.systemType ? 'active' : ''"
|
||||
>
|
||||
<span class="name">{{ system.name }}</span>
|
||||
<span class="des">边缘网关：{{ system.power }} W</span>
|
||||
<span class="des">总有功功率(台区)：{{ system.num }}</span>
|
||||
<span class="des" v-for="title in system.titles" :key="title.v"
|
||||
>{{ title.v }}：{{ system[title.key] }}{{ title.sufix }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<videos v-if="systemType == 4" :station-id="selectStationId"/>
|
||||
<device v-else :station-id="selectStationId" :system-type="systemType"/>
|
||||
<videos v-if="systemType == 4" :station-id="selectStationId" />
|
||||
<device v-else :station-id="selectStationId" :system-type="systemType" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -62,10 +65,14 @@ export default {
|
||||
systemType: 1,
|
||||
value: [],
|
||||
stations: [],
|
||||
selectStationId:'',
|
||||
selectStationId: '',
|
||||
systems: [
|
||||
{
|
||||
name: '储能系统',
|
||||
titles: [
|
||||
{ v: '边缘网关', key: 'num' },
|
||||
{ v: '总有功功率(台区)', key: 'power', sufix: 'kW' }
|
||||
],
|
||||
power: 60,
|
||||
num: 62,
|
||||
systemType: 1
|
||||
@@ -74,99 +81,125 @@ export default {
|
||||
name: '充电系统',
|
||||
power: 60,
|
||||
num: 62,
|
||||
systemType: 2
|
||||
systemType: 2,
|
||||
titles: [
|
||||
{ v: '总功率', key: 'power', sufix: 'kW' },
|
||||
{ v: '数量', key: 'num' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '光伏系统',
|
||||
power: 60,
|
||||
num: 62,
|
||||
systemType: 3
|
||||
systemType: 3,
|
||||
titles: [
|
||||
{ v: '总功率', key: 'power', sufix: 'kW' },
|
||||
{ v: '数量', key: 'num' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '安防系统',
|
||||
power: 60,
|
||||
num: 62,
|
||||
systemType: 4
|
||||
systemType: 4,
|
||||
titles: [
|
||||
{ v: '总功率', key: 'power', sufix: 'kW' },
|
||||
{ v: '数量', key: 'num' }
|
||||
]
|
||||
}
|
||||
// {
|
||||
// name: "储能系统4",
|
||||
// }
|
||||
],
|
||||
workMode:'',
|
||||
workModes:[
|
||||
workMode: '',
|
||||
workModes: [
|
||||
// 0：手动，1：峰谷套利，2：增网配容，3：应急供电，4：并网保电，5：自定时段
|
||||
{
|
||||
value:0,
|
||||
label:'手动'
|
||||
value: 0,
|
||||
label: '手动'
|
||||
},
|
||||
{
|
||||
value:1,
|
||||
label:'峰谷套利'
|
||||
value: 1,
|
||||
label: '峰谷套利'
|
||||
},
|
||||
{
|
||||
value:2,
|
||||
label:'增网配容'
|
||||
value: 2,
|
||||
label: '增网配容'
|
||||
},
|
||||
{
|
||||
value:3,
|
||||
label:'应急供电'
|
||||
value: 3,
|
||||
label: '应急供电'
|
||||
},
|
||||
{
|
||||
value:4,
|
||||
label:'并网保电'
|
||||
value: 4,
|
||||
label: '并网保电'
|
||||
},
|
||||
{
|
||||
value:5,
|
||||
label:'自定时段'
|
||||
value: 5,
|
||||
label: '自定时段'
|
||||
}
|
||||
|
||||
],
|
||||
deviceGroup:[]
|
||||
deviceGroup: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getStations()
|
||||
},
|
||||
methods: {
|
||||
//下发
|
||||
async handleDispatch() {
|
||||
console.log(this.workMode)
|
||||
try {
|
||||
const res = await postReq('/updateStation', {
|
||||
station_id: this.selectStationId,
|
||||
work_mode: this.workMode
|
||||
})
|
||||
if (res.errcode == 0) {
|
||||
this.$message.success('下发成功')
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error('下发失败')
|
||||
}
|
||||
},
|
||||
//场站切换
|
||||
getStationChange(val){
|
||||
console.log(val);
|
||||
getStationChange(val) {
|
||||
console.log(val)
|
||||
this.getStationAttr()
|
||||
|
||||
},
|
||||
//查询场站列表
|
||||
async getStations() {
|
||||
try {
|
||||
const res = await getReq('/queryStationList', { page: 0, 'page_size': 10000 })
|
||||
const res = await getReq('/queryStationList', { page: 0, page_size: 10000 })
|
||||
|
||||
this.stations = res.data
|
||||
this.selectStationId=this.stations[0]['station_id']
|
||||
this.selectStationId = this.stations[0]['station_id']
|
||||
this.getStationAttr()
|
||||
} catch (error) {
|
||||
this.stations = []
|
||||
this.selectStationId=''
|
||||
this.selectStationId = ''
|
||||
this.$message.error(error.message)
|
||||
}
|
||||
},
|
||||
// 查询场站的参数
|
||||
async getStationAttr(){
|
||||
async getStationAttr() {
|
||||
try {
|
||||
const res = await getReq('/queryStationOverview', { station_id: this.selectStationId })
|
||||
|
||||
res.data.device_group.forEach((Element,index) => {
|
||||
this.systems[index].num=Element.count
|
||||
this.systems[index].power=Element.power
|
||||
});
|
||||
this.workMode=res.data.work_mode
|
||||
res.data.device_group.forEach((Element, index) => {
|
||||
this.systems[index].num = Element.count
|
||||
this.systems[index].power = Element.power
|
||||
})
|
||||
this.workMode = res.data.work_mode
|
||||
} catch (error) {
|
||||
this.deviceGroup = []
|
||||
this.workMode=''
|
||||
this.workMode = ''
|
||||
// this.$message.error(error.errmsg)
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
chooseStation(system) {
|
||||
console.log(system, 'system')
|
||||
|
||||
this.systemType = system.systemType
|
||||
}
|
||||
}
|
||||
@@ -176,8 +209,8 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
@import url(@/style/color.scss);
|
||||
.monitor {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
padding: 20px;
|
||||
background: $bg1-color;
|
||||
border-radius: 15px;
|
||||
@@ -207,24 +240,21 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.stations {
|
||||
min-width: 155px;
|
||||
max-width: 235px;
|
||||
width: 13%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
border-radius: 12px;
|
||||
background: $bg2-color;
|
||||
padding: 15px 0;
|
||||
overflow-y: auto;
|
||||
padding-top: 10px;
|
||||
grid-template-rows: repeat(auto-fit, minmax(140px, 4fr));
|
||||
.station-item {
|
||||
width: calc(100% - 30px);
|
||||
margin: 0 15px 15px 15px;
|
||||
flex: 1;
|
||||
width: 100px;
|
||||
margin: 0 10px 10px 10px;
|
||||
border-radius: 12px;
|
||||
min-width: 150px;
|
||||
|
||||
min-width: 160px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
padding: 10px 15px;
|
||||
padding: 10px 10px;
|
||||
cursor: pointer;
|
||||
|
||||
.name {
|
||||
@@ -236,6 +266,11 @@ export default {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 40px;
|
||||
display: inline-block;
|
||||
max-width: 160px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
@@ -243,7 +278,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
width: calc(100% - 200px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
<template>
|
||||
<div class="alarmLog">
|
||||
<searchBox
|
||||
:btn-option-list="btnOptionList"
|
||||
@operateForm="operateForm"
|
||||
></searchBox>
|
||||
<searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox>
|
||||
|
||||
<div class="content-table">
|
||||
<ComTable
|
||||
@@ -11,17 +8,17 @@
|
||||
:table-data="tableData"
|
||||
@handlePagesizeChange="handlePagesizeChange"
|
||||
ref="comTable"
|
||||
:table-option="tableOption"
|
||||
:page-option="pageOption"
|
||||
:table-h="tableH"
|
||||
>
|
||||
<template #type="record">
|
||||
<span>{{ ['其它','系统日志','操作日志','设备日志'][record.type] }}</span>
|
||||
<span>{{ ['其它', '系统日志', '操作日志', '设备日志'][record.type] }}</span>
|
||||
</template>
|
||||
<template #status="record">
|
||||
<span><a-tag :color="record.status ? 'red' : 'green'">{{
|
||||
<span
|
||||
><a-tag :color="record.status ? 'red' : 'green'">{{
|
||||
record.status ? '异常' : '正常'
|
||||
}}</a-tag></span>
|
||||
}}</a-tag></span
|
||||
>
|
||||
</template>
|
||||
|
||||
<template #action="record">
|
||||
@@ -47,11 +44,11 @@ import { getReq, postReq } from '@/request/api.js'
|
||||
import EditCom from '@/components/EditCom.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
|
||||
import { createVNode } from 'vue'
|
||||
import { Modal } from 'ant-design-vue'
|
||||
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
EditCom,
|
||||
EditCom
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
@@ -64,7 +61,8 @@ export default {
|
||||
page: 1
|
||||
},
|
||||
btnOptionList: [],
|
||||
paramsDate: {}
|
||||
paramsDate: {},
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
@@ -80,7 +78,7 @@ export default {
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.operateList = this.$getBtns(['查看', '删除'])
|
||||
this.operateList = this.$getBtns(['查看'])
|
||||
// this.btnOptionList = this.$getBtns(['新增'])
|
||||
this.getList()
|
||||
},
|
||||
@@ -120,21 +118,20 @@ export default {
|
||||
async operateForm(type, record = {}) {
|
||||
this.formStatus = type
|
||||
|
||||
if(type=='edit'||type=='read'){
|
||||
if (type == 'edit' || type == 'read') {
|
||||
await this.getRuleFormInfo(record)
|
||||
|
||||
this.formModal = true
|
||||
this.formState = record
|
||||
}else if(type=='del'){
|
||||
this.handleDelete([record.device_id],this.getList)
|
||||
}else if(type=='back'){
|
||||
} else if (type == 'del') {
|
||||
this.handleDelete([record.device_id], this.getList)
|
||||
} else if (type == 'back') {
|
||||
this.formModal = false
|
||||
this.getList()
|
||||
}
|
||||
|
||||
},
|
||||
// 删除操作
|
||||
async handleDelete(id,callback) {
|
||||
async handleDelete(id, callback) {
|
||||
const that = this
|
||||
Modal.confirm({
|
||||
title: '你确认删除数据吗?',
|
||||
@@ -142,10 +139,10 @@ export default {
|
||||
|
||||
async onOk() {
|
||||
try {
|
||||
const res = await getReq('/deleteUser',{user_id:id})
|
||||
const res = await getReq('/deleteUser', { user_id: id })
|
||||
if (res.errcode === 0) {
|
||||
this.$message.success(res.errmsg)
|
||||
this.pageOption.page=1
|
||||
this.pageOption.page = 1
|
||||
callback()
|
||||
} else {
|
||||
throw res
|
||||
@@ -161,8 +158,6 @@ export default {
|
||||
})
|
||||
},
|
||||
async getRuleFormInfo(record) {
|
||||
|
||||
|
||||
const row = record || {}
|
||||
|
||||
for (let e of alarmlogOptions) {
|
||||
@@ -183,8 +178,6 @@ export default {
|
||||
// const attrs=JSON.parse(row.attrs||"{}")
|
||||
// e.ruleForm[i.key] = attrs[i.key]
|
||||
// }
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -202,7 +195,7 @@ export default {
|
||||
height: 100%;
|
||||
|
||||
.content-table {
|
||||
height: calc(100% - 70px);
|
||||
height: calc(100% - 90px);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -48,7 +48,7 @@ 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'
|
||||
import {deviceTypeList} from '@/utils/config'
|
||||
export default {
|
||||
@@ -170,7 +170,7 @@ export default {
|
||||
// 删除操作
|
||||
async handleDelete(id,callback) {
|
||||
const that = this
|
||||
Modal.confirm({
|
||||
this.$Modal.confirm({
|
||||
title: '你确认删除数据吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
|
||||
@@ -234,7 +234,7 @@ export default {
|
||||
height: 100%;
|
||||
|
||||
.content-table {
|
||||
height: calc(100% - 70px);
|
||||
height: calc(100% - 90px);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
<template>
|
||||
<div class="alarmlog">
|
||||
<searchBox
|
||||
:btn-option-list="btnOptionList"
|
||||
@operateForm="operateForm"
|
||||
></searchBox>
|
||||
<div class="syslog">
|
||||
<searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox>
|
||||
|
||||
<div class="content-table">
|
||||
<ComTable
|
||||
@@ -11,13 +8,14 @@
|
||||
:table-data="tableData"
|
||||
@handlePagesizeChange="handlePagesizeChange"
|
||||
ref="comTable"
|
||||
:table-option="tableOption"
|
||||
:page-option="pageOption"
|
||||
:table-h="tableH"
|
||||
>
|
||||
<template #gender="record">
|
||||
<!-- 0:女; 1:男 -->
|
||||
<span>{{ ['女', '男'][record.gender] }}</span>
|
||||
<template #status="record">
|
||||
<span>
|
||||
<a-tag :color="record.status ? 'red' : 'green'">{{
|
||||
record.status ? '异常' : '正常'
|
||||
}}</a-tag>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #action="record">
|
||||
@@ -38,7 +36,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { columnList, userOptions } from '../../../public/config/columnList'
|
||||
import { columnList, syslogOptions } from '../../../public/config/columnList'
|
||||
import { getReq, postReq } from '@/request/api.js'
|
||||
|
||||
import EditCom from '@/components/EditCom.vue'
|
||||
@@ -61,13 +59,14 @@ export default {
|
||||
page: 1
|
||||
},
|
||||
btnOptionList: [],
|
||||
paramsDate: {}
|
||||
paramsDate: {},
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
created() {
|
||||
let info = []
|
||||
let col = columnList.find((i) => i.page == 'alarmlog').columns
|
||||
let col = columnList.find((i) => i.page == 'syslog').columns
|
||||
if (col.length) {
|
||||
col.forEach((item) => {
|
||||
info.push(this.$setWidth(item))
|
||||
@@ -77,8 +76,8 @@ export default {
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.operateList = this.$getBtns(['查看', '修改', '删除'])
|
||||
this.btnOptionList = this.$getBtns(['新增'])
|
||||
this.operateList = this.$getBtns(['查看'])
|
||||
// this.btnOptionList = this.$getBtns(['新增'])
|
||||
this.getList()
|
||||
},
|
||||
|
||||
@@ -95,7 +94,7 @@ export default {
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await getReq('/queryUserList', params)
|
||||
const res = await getReq('/querySystemLogList', params)
|
||||
if (res.errcode === 0) {
|
||||
this.$refs.comTable.loading = false
|
||||
|
||||
@@ -114,41 +113,25 @@ export default {
|
||||
//统一处理报错提示
|
||||
}
|
||||
},
|
||||
operateForm(type, record = {}) {
|
||||
console.log(record, record.id, 'rrrrrrrrrr')
|
||||
async operateForm(type, record = {}) {
|
||||
this.formStatus = type
|
||||
switch (type) {
|
||||
case 'add':
|
||||
this.formModal = true
|
||||
this.formState = {}
|
||||
this.getRuleFormInfo()
|
||||
|
||||
break
|
||||
case 'edit':
|
||||
case 'read':
|
||||
if (type == 'edit' || type == 'read') {
|
||||
await this.getRuleFormInfo(record)
|
||||
|
||||
this.formModal = true
|
||||
this.formState = record
|
||||
this.getRuleFormInfo(record)
|
||||
break
|
||||
|
||||
case 'del':
|
||||
this.handleDelete([record.user_id], this.getList)
|
||||
|
||||
break
|
||||
|
||||
case 'back':
|
||||
} else if (type == 'del') {
|
||||
this.handleDelete([record.device_id], this.getList)
|
||||
} else if (type == 'back') {
|
||||
this.formModal = false
|
||||
this.getList()
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
// 删除操作
|
||||
async handleDelete(id, callback) {
|
||||
const that = this
|
||||
Modal.confirm({
|
||||
this.$Modal.confirm({
|
||||
title: '你确认删除数据吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
|
||||
@@ -173,27 +156,13 @@ export default {
|
||||
})
|
||||
},
|
||||
async getRuleFormInfo(record) {
|
||||
function getInfo(data, url) {
|
||||
return new Promise((reslove, reject) => {
|
||||
getReq(data, url).then((res) => {
|
||||
reslove(res.data)
|
||||
})
|
||||
})
|
||||
}
|
||||
const row = record || {}
|
||||
|
||||
let row = {}
|
||||
if (record && record.user_id) {
|
||||
// row = await getInfo({ id: record.id },'/queryUserList')
|
||||
this.record = record
|
||||
row = record
|
||||
// this.type='edit'
|
||||
for (let e of syslogOptions) {
|
||||
for (let i of e.list) {
|
||||
e.ruleForm[i.key] = row[i.key] || ''
|
||||
}
|
||||
}
|
||||
userOptions.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
|
||||
@@ -205,11 +174,11 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user {
|
||||
.syslog {
|
||||
height: 100%;
|
||||
|
||||
.content-table {
|
||||
height: calc(100% - 70px);
|
||||
height: calc(100% - 90px);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -49,7 +49,7 @@ 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: {
|
||||
|
||||
@@ -234,7 +234,7 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.policy {
|
||||
width: 100%;
|
||||
// width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 15px;
|
||||
.content-table {
|
||||
|
||||
@@ -52,7 +52,7 @@ 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: '',
|
||||
|
||||
@@ -45,7 +45,7 @@ import { getReq, postReq } from '@/request/api.js'
|
||||
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: '',
|
||||
|
||||
@@ -52,7 +52,7 @@ 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: '',
|
||||
|
||||
@@ -42,20 +42,13 @@
|
||||
<script>
|
||||
import { columnList, userOptions } 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() {
|
||||
@@ -155,7 +148,7 @@ export default {
|
||||
// 删除操作
|
||||
async handleDelete(id,callback) {
|
||||
const that = this
|
||||
Modal.confirm({
|
||||
this.$Modal.confirm({
|
||||
title: '你确认删除数据吗?',
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
|
||||
|
||||
@@ -27,12 +27,18 @@ module.exports = defineConfig({
|
||||
@import "@/style/color.scss";
|
||||
@import "@/style/antd.scss";
|
||||
` //在每个 .scss 文件顶部自动添加这行代码，无需手动导入
|
||||
},
|
||||
less: {
|
||||
lessOptions: {
|
||||
javascriptEnabled: true // 兼容 Less 3.0+ 的 JavaScript 表达式
|
||||
}
|
||||
}
|
||||
},
|
||||
extract: {
|
||||
ignoreOrder: true // 忽略 CSS 顺序警告
|
||||
}
|
||||
},
|
||||
|
||||
// webpack相关配置
|
||||
configureWebpack: {
|
||||
// 自定义打包入口
|
||||
|
||||
Reference in New Issue
Block a user